Creating a inline span class in HTML and CSS

Question

I'm trying to create the following span class.

Actually I'm new to the UI designing and I couldn't to create this button exactly as the image.This is my code so far.

.white-button {
  width: 500px;
  height: 100px;
  border-style: solid;
  border-width: 1px;
  border-color: #eaeaea;
  text-align: justify;
}

.green-button {
  width: 500px;
  height: 100px;
  border-style: solid;
  border-width: 1px;
  border-color: #eaeaea;
  text-align: justify;
}

<span style="display: inline;">
        <span class="white-button">$ 50
        </span>
<span class="green-button">Give Now
        </span>
</span>
<font style="color:#20A1D4; text-align:left">
  <i><br>Why give $5o?</i>
</font>

Can anyone help me ! Thank you.

Answer 1

Here's a solution using inputs which provides semantic meaning.

.text-input {
  width:80px;
  height:29px;
  border-radius:4px;
  border:1px solid #ccc;
  padding:4px;
  font-size:10pt;
  color:#777;
  font-weight:bold;
}

.green-button {
  width: 88px;
  height: 40px;
  border-radius:4px;
  margin-left:8px;
  background-color:#1cbc2d;
  border-style: solid;
  border: 1px solid #1cbc2d;
  color:#fff;
  font-size:10pt;
}

.why-give {
  color:#20A1D4;
  font-style: italic;
  font-size:9pt;
  margin-top:6px;
}

<input class="text-input" type="text" value="$50"/>
<input class="green-button" type="button" value="Give Now"/>

<div class="why-give">Why give $50?</div>

Answer 2

Here is something you can start with:

.white-button{
  width: 100px;
  height: 25px;
  border-style: solid;
  border-width: 1px;
  border-color:#eaeaea;
  text-align: justify;
  display: inline-block;
  padding-top: 5px;
}
.green-button{
  width: 100px;
  height: 25px;
  border-style: solid;
  border-width: 1px;
  border-color:#eaeaea;
  text-align: justify;
  display: inline-block;
  background: #00be1c;
  border-radius: 3px;
  padding-top: 5px;
  text-align: center;
  color: white;
}
.why {
  color:#20A1D4;
  font-style: italic;
}

<div>
  <div class="white-button">$ 50 </div>
  <div class="green-button">Give Now</div>
</div>

<span class="why">Why give $5o?</span>

The inline was not what you were looking for. You need inline-block.