HTML CSS align boxes of different sizes - html

Question

I have two boxes a text box and a drop down menu box.
The problem is that the drop down box align so far to the right.
What i want is to have the label text to the left. Then comes a defined amount of space. Then all boxes start at a certain position.
As it is right now the boxes all end at the same position.
body {
font-size: 100%;
background-color: black;
}
label {
float: left;
font-size: 1.3em;
padding-right: 0.625em;
}
.box {
color: rgb(255, 255, 255);
clear: both;
text-align: right;
line-height: 1.5625em;
}
.main {
float: left;
}
.menu {
color: rgb(255, 255, 255);
clear: both;
text-align: right;
line-height: 1.5625em;
}
<div class="main">
<div class="box">
<label for="test">test </label>
<input type="text" id="test" placeholder="placeholder" />
<div class="menu">
<label for="peashooter">peas</label>
<select id="peashooter">
<option value="peas">peas</option>
<option value="peas">peas</option>
<option value="peas">peas</option>
<option value="peas">peas</option>
</select>
</div>
</div>
I want the boxes to align to the drawn left line:

Answer 1

You can do it with grid layout.
Check: https://jsfiddle.net/filipasimao/Lca19d7z/
body {
font-size: 1.2rem;
background-color: black;
color: white;
}
.main {
display: grid;
grid-template-columns: 60px auto;
grid-row-gap: 5px;
}
<div class="main">
<label for="foo">foo</label>
<input type="text" id="foo" placeholder="foo placeholder" />
<label for="bar">bar</label>
<select id="bar">
<option value="bar1">bar 1</option>
<option value="bar2">bar 2</option>
<option value="bar3">bar 3</option>
<option value="bar4">bar 4</option>
</select>
</div>

Answer 2

One approach is to make label part fixed with some determined width up-front, e.g. 50 pixels, plus apply text-align:left as Sarthak Jha mentioned. You can also specify width in % and limit it with max-width in pixels, also use overflow hidden or auto etc. In-browser page zoom will not disrupt the alignment.
body
{
font-size:100%;
background-color:black;
}
label
{
float:left;
font-size:1.3em;
padding-right:0.625em;
width:15%;
min-width:45px;
max-width:150px;
}
.box
{
color:rgb(255, 255, 255);
clear:both;
text-align:left;
line-height:1.5625em;
}
.main{
float:left;
}
.menu
{
color:rgb(255, 255, 255);
clear:both;
text-align:left;
line-height:1.5625em;
}
<div class="main">
<div class="box">
<label for="test">test </label>
<input type="text" id="test" placeholder="placeholder" />
<div class="menu">
<label for="peashooter">peas</label>
<select id="peashooter">
<option value="peas">peas</option>
<option value="peas">peas</option>
<option value="peas">peas</option>
<option value="peas">peas</option>
</select>
</div>
</div>

Answer 3

.menu
{
color: rgb(255, 255, 255);
clear:both;
text-align:left;
line-height: 1.5625em; /* The distance between each box */
}
Make it " text-align: left "

Answer 4

You can use float: left on your #peashooter and give your label elements a width so that your inputs align correctly:
body {
font-size: 100%;
background-color: black;
}
label {
float: left;
font-size: 1.3em;
padding-right: 0.625em;
}
.box {
color: rgb(255, 255, 255);
clear: both;
text-align: right;
line-height: 1.5625em;
}
.main {
float: left;
}
.menu {
color: rgb(255, 255, 255);
clear: both;
text-align: right;
line-height: 1.5625em;
}
.main #peashooter {
float: left;
}
.main label {
width: 30px;
}
<div class="main">
<div class="box">
<label for="test">test </label>
<input type="text" id="test" placeholder="placeholder" />
<div class="menu">
<label for="peashooter">peas</label>
<select id="peashooter">
<option value="peas">peas</option>
<option value="peas">peas</option>
<option value="peas">peas</option>
<option value="peas">peas</option>
</select>
</div>
</div>
</div>