Aligning the input bars on top of each other

How can I align the input bars right on top of each other? The way I have them currently set up is that the label text is taking up space from the left of each input bar so that the input bars are not perfectly aligned on top of each other.

Here’s my HTML and CSS:

<body>

<div class="container">

<h2>Expense Tracker</h2>
<h3>Add New Item</h3>

<div>
<label>Name</label>
<input type="text" id="name">
</div>

<div>
<label>Date</label>
<input type="number" id="date">
</div>

<div>
<label>Amount</label>
<input type="number" name="amount"> 
</div>

<div class="button">
<button type="button">Add Expense</button>
</div>

<table class="table">
<tr>
  <th>Name</th>
  <th>Date</th>
  <th>Amount</th>
<tr/>
<tr>
    <th>value 1</th>
    <th>value 2</th>
    <th>value 3</th>
</tr>
</table>
</div>
</body>
h2, h3 {
	text-align: center;
}
table, th, tr {
	border:  1px solid black;
	border-collapse: collapse;
}

.container {
	display: flex;
	flex-direction: column;
	margin:  0 auto;
	max-width: 300px;
	align-content: center;
	padding: 0px;
	
}

label {
	display:  inline-block;
	margin: 10px;
	text-align: right;
}

.button {
	margin: 20px auto;
	text-align: center;
}

.table {
	margin:  0 auto;
	align-content: center;
}

Usually, aligning elements comes down to one form or another of flex box. Because each of your inputs were the same width, if I made the label float left and the input float right inside a div it would work. I could do this with flex. Here is my solution.

Html

<div class='input-item'>
<label>Name</label>
<input type="text" id="name">
</div>

<div class='input-item'>
<label>Date</label>
<input type="number" id="date">
</div>

<div class='input-item'>
<label>Amount</label>
<input type="number" name="amount"> 
</div>

CSS

.input-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

Keep up the good work.

It worked! Thank you Zyker : )

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.