How can I align an item with an item above it in html/css/js?

Question

I have 3 input blanks on my form (see the screenshot below). I have 1 dropdown button and one <input type="text"> in 1 row and another <input type="text"> in the 2nd row. I want the 2 <input type="text"> to align. In other words, I want the "Choice 2" box to be right below the "Choice 1" box. How can I do this? Thanks.

By the way, This is my html:

<div class="container">
<div class="dropdown">
      <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        2
        <span class="caret"></span>
      </button>
      <ul id="list" class="dropdown-menu dropdown-info" aria-labelledby="dropdownMenu1">
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
      </ul>
      <input type="text" name="" value="" placeholder="Choice 1"> <br>
</div>
<div class="container">
<input type="text" name="" value="" placeholder="Choice 2">
    </div></div>

And this is my css:

.container {padding: 1% 20%;
  margin: auto;
  text-align: center;}

body {
  background-color: #b6e6bd;
  line-height: 1.6;
}

How can I make the choice 1 and choice 2 boxes which are both <input type="text"> be directly above and below each other? Thanks

Answer 1

Maybe you are allowed to slightly change HTML?

Here is my try. I've moved two input[text] to one div and the dropdown to another. Also I changed .container class to be flex@center (but you can use any other layout - table or div with known widths).

 .container { padding: 1% 20%; margin: auto; text-align: center; display: flex; justify-content: center; } body { background-color: #b6e6bd; line-height: 1.6; }.container-inner { margin-left: 10px; }

 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="dropdown"> <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 2 <span class="caret"></span> </button> <ul id="list" class="dropdown-menu dropdown-info" aria-labelledby="dropdownMenu1"> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> </ul> </div> <div class="container-inner"> <input type="text" name="" value="" placeholder="Choice 1"> <br> <input type="text" name="" value="" placeholder="Choice 2"> </div> </div>

Answer 2

The best way is to use a framework like Bootstrap . But if you won't I suggest you to change your code to this:

 .container { padding: 1% 20%; margin: auto; text-align: center;} body { background-color: #b6e6bd; line-height: 1.6; }

 <div class="container"> <div class="dropdown"> <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 2 <span class="caret"></span> </button> <select id="list" class="dropdown-menu dropdown-info" aria-labelledby="dropdownMenu1"> <option><a href="#">2</a></option> <option><a href="#">3</a></option> <option><a href="#">4</a></option> </select> <input type="text" name="" value="" placeholder="Choice 1"> <br> </div> <div class="container"> <input type="text" name="" value="" placeholder="Choice 2" style="margin-right: -64px;"> </div> </div>

I hope this will helpful.