How to align vertical textboxes in CSS and HTML?

Question

I am a beginner at front-end (started yesterday) and I'm learning through the FreeCodeCamp. I am trying to build a survey website. I want to align the left side of my textbox down in the bottom with the left side of my left textbox on the top. I tried changing the attribute of the text-align element but it didn't do me justice. I apologize if this question has been asked already. I couldn't relate previous answers to mine.

This is my CODE:

body {background-color: #98AFC7;}

#title{
  text-align: center;
  font-family: Arial, Times, serif;
  font-style: oblique;
  color: white;
}

#screen-belly{
  background-color: rgb(250, 250, 250);
  margin: 0 auto;
  border-radius: 4px;
  width: 75%%;
  max-width: 1000px;
  padding: 10px;
  padding-top: 20px;
}

p{
  text-align: center;
  font-family: monospace, serif;
  font-size: 15px;
}

.rightTab {
  display: inline-block;
  text-align: left;
  width: 48%;
  vertical-align: middle;
}

.leftTab {
  display: inline-block;
  text-align: right;
  width: 48%;
  vertical-align: middle;
}

.eMailTab{
  display: inline;
  text-align: right;
  width: 48%;
}

.name-fields {
  height: 20px;
  width: 140px;
  padding: 5px;
  margin: 10px;
  border: 1px solid #c0c0c0;
  border-radius: 2px;
}

.input-field {
  height: 20px;
  width: 280px;
  padding: 5px;
  margin: 10px;
  border: 1px solid #c0c0c0;
  border-radius: 2px;
}

<h1 id="title">Survey Form</h1>

<div id="screen-belly">
  <p>Please take the short Survey to hep us improve our services</p>

  <div class="rowTab">
      <div class="leftTab">
        <input autofocus type="text" name="name" id="name" class="name-fields" placeholder="First name" required>
      </div>
      <div class="rightTab">
        <input autofocus type="text" name="name" id="name" class="name-fields" placeholder="Last Name" required>
      </div>
    </div>

      <div class="eMailTab">
        <input autofocus type="text" name="email" id="email" class="input-field" placeholder="e-Mail address" required>
      </div>
    </div>
</div>

   

And here's my CodePen link so you can see what I'm talking about:

https://codepen.io/omaroz92/full/VBWbae/

Answer 1

You can use flexbox to achieve this easily. I changed your HTML and CSS a bit to make it work.

body {
  background-color: #98AFC7;
}

#title {
  text-align: center;
  font-family: Arial, Times, serif;
  font-style: oblique;
  color: white;
}

#screen-belly {
  background-color: rgb(250, 250, 250);
  margin: 0 auto;
  border-radius: 4px;
  width: 75%;
  max-width: 1000px;
  padding: 10px;
  padding-top: 20px;
}

p {
  text-align: center;
  font-family: monospace, serif;
  font-size: 15px;
}

.container {
  width: 75%;
  max-width: 600px;
  margin: 0 auto;
}

.row {
  display: flex;
}

input {
  flex: 1;
  height: 20px;
  min-width: 0;
  padding: 5px;
  margin: 10px;
  border: 1px solid #c0c0c0;
  border-radius: 2px;
}

<h1 id="title">Survey Form</h1>

<div id="screen-belly">
  <p>Please take the short Survey to hep us improve our services</p>

  <div class="container">
    <div class="row">
      <input autofocus type="text" name="name" id="name" placeholder="First name" required>
      <input type="text" name="name" id="name" placeholder="Last Name" required>
    </div>
    <div class="row">
      <input type="text" name="email" id="email" placeholder="e-Mail address" required>
    </div>
  </div>
</div>

Answer 2

By making your div display:inline you effectively remove the width attribute. So the text element is in fact aligned right, however without the full 48% width the textbox stays in place. https://codepen.io/anon/pen/pZOPPV. This however may not be the best way to do these things. Try inline-block:

.eMailTab{
  display: inline-block;
  text-align: right;
  width: 62%;
}

To get the left side of your email and first name boxes to align, adjust the width of the email box.

If you want to see the actual spec on the width property, the answer to this SO is appropriate: https://stackoverflow.com/a/22487952/462006