How to move multiple input boxes - html

Question

I am attempting to align the two cells for the address input. The one that is inline I can shift, but the ones that are not I do know know how to shift right. If I could get some creative feed back I would appreciate it.
.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="email#email.com">
</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>

Answer 1

use nth-child :
.EMBody {
position: relative;
background-color: navajowhite;
}
.EMSpace {
display: inline-block;
width: 100px;
}
.EMAdj {
display: inline-block;
margin-right: 20%;
}
input[type="text"] {
width: 60%;
}
input:nth-child(3),input:nth-child(4)
{
margin-left:104px;
}
<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="email#email.com">
</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>

Answer 2

The easiest fully responsive solution would be to use CSS-Grid. THis would allow you to cut the code down a lot.
simply use a 2 column layout and let the label for the address span 3 rows.
.EMBody {
display: grid;
grid-template-columns: min-content auto;
column-gap: 10px;
}
.EMBody {
white-space: nowrap;
}
.EMBody label:nth-of-type(2) {
grid-row: span 3;
}
<section class="EMBody">
<label class="EMSpace">Full Name:</label>
<input type="text" placeholder="Enter your name">
<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">
<label class="EMSpace">Phone Number:</label>
<input type="text" placeholder="9999999999">
<label class="EMSpace">Email:</label>
<input type="text" placeholder="email#email.com">
<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>
</section>