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 protected]">
  </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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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 protected]">
  </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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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 protected]">

  <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>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>