JSFiddle - React, Tailwind, and code Playground
HTML
<form class="billing-area" action="">
<fieldset id="billing">
<!-- <legend id="billing-legend"></legend> -->
<h4><span class="inline-bold">Billing Information:</span></h4>
<ol>
<li>
<label for="billing-name">Your name as it appears on your credit card</label>
<input type="text" size="40" id="billing-name" name="billing-name" placeholder="Name as it appears on your credit card" />
</li>
<li>
<label for="billing-address">Your billing address</label>
<input type="text" size="40" id="billing-address" name="billing-address" placeholder="Credit Card billing address" />
</li>
<li>
<label for="billing-address-2">Billing address, line 2</label>
<input type="text" size="40" id="billing-address-2" name="billing-address-2" placeholder="Billing address line 2, if needed" />
</li>
<li>
<div class="city">
<label id="city-label"for="billing-city">City</label>
<input type="text" id="billing-city" name="billing-city" placeholder="City" />
</div><div class="state">
<label for="billing-state">State</label>
<input type="text" id="billing-state" name="billing-state" placeholder="State" />
</div><div class="zip">
<label for="billing-zip">Zip Code</label>
<input type="number" id="billing-zip" name="billing-zip" placeholder="Zip Code" />
</div>
</li>
<li>
<label for="billing-phone">Your Phone Number</label>
<input type="tel" size="40" id="billing-phone" name="billing-phone" placeholder="Your phone number" />
</li>
<li>
<label for="submit-returning-user-btn" id="submit-returning-user-btn"> </label>
<button id="submit-returning-user-btn">Sign In</button>
</li>
</ol>
</fieldset>
</form> <!-- END billing-area -->
CSS
.billing-area{
/* border:1px solid red; */
}
#billing{
background:rgba(31, 166, 0, 1.0);
border:0;
border-radius:6px;
float:left;
width:45%;
margin:0 0 2em 1.8em;
padding:0.2em 0 1em 0;
}
#billing-legend{
margin:0 0 0 1em;
/* padding:0 0.5em 2em 0.5em; */
}
#billing > h4{
color:rgb(255,255,255);
font-weight:normal;
font-size:120%;
margin:0.5em 0 0 1.6em;
}
#billing > ol{
/* border:1px solid red; */
list-style-type:none;
}
#billing > ol li{
/* border:1px solid gold; */
float:none;
display:block;
margin:0.5em 2em 0 0;
}
#billing > ol li label{
color:rgb(255,255,255);
display:block;
font-size:70%;
}
#billing a{
color:rgb(255,255,255);
border-bottom:1px dotted rgb(255,255,255);
font-size:80%;
}
#submit-returning-user-btn{
padding:1% 1%;
}
.city {
float: left;
width: 33%;
}
.city input {
width: 100%;
}
.state {
float:left;
width: 33%;
padding-left: 20px;
}
.state input {
width: 100%;
}
.zip {
width: 20%;
float: right;
}
.zip input {
width: 100%;
}