I'm struggling to align the two cells for the address input. I can adjust the inline one easily, but the others are giving me trouble. I'm looking for some creative feedback on how to make this work.
.EMBody {
position: relative;
background-color: navajowhite;
}
.EMSpace {
display: inline-block;
width: 100px;
}
.EMAdj {
display: inline-block;
margin-right: 20%;
}
input[type="text"] {
width: 60%;
}
<section class="EMBody">
<div>
<label class="EMSpace">Full Name:</label>
<input type="text" placeholder="Enter your name">
</div>
<div>
<label class="EMSpace">Address:</label>
<input type="text" placeholder="Street address">
<input type="text" class="EMAdj" placeholder="City">
<input type="text" class="EMAdj" placeholder="Zip">
</div>
<div>
<label class="EMSpace">Phone Number:</label>
<input type="text" placeholder="9999999999">
</div>
<div>
<label class="EMSpace">Email:</label>
<input type="text" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="42272f232b2e02272f232b2e6c212d2f">[email protected]</a>">
</div>
<div>
<label class="EMSpace">Brief Message: </label>
<textarea cols="25" rows="5" class="message" placeholder="Please give a brief discription of your Iguana issues. Green or Spiny Tailed? In the attics, flowerbed, canal?"></textarea>
</div>
</section>