How to horizontally align div element to another div? - html

Question

I create the following HTML page and I would align the two DIV elements (the ones with lista and scheda id, contained within parent div) to the same position, at the top of the page. Here is my code:
#tabella1,
#tabella1 td {
border: solid 1px;
}
th {
border: solid 1px;
font-style: bold;
background-color: white;
}
#tabella1 tr:nth-child(odd) {
background-color: gray;
}
#tabella1 tr:nth-child(even) {
background-color: lightgray;
}
#tabella1 tr:nth-child(n):not(:nth-child(1)):hover {
background-color: blue;
color: yellow;
cursor: pointer;
}
.titolo {
text-align: center;
font-weight: bold;
}
#lista {
display: inline-block;
margin: 30px;
position: relative;
top: 0px;
}
button {
width: 60px;
height: 20px;
}
form {
display: inline-block;
}
#msg {
font-weight: bold;
}
#scheda {
display: inline-block;
position: relative;
top: 0px;
text-align: center;
}
#tabella2 td:nth-child(even) {
border: solid 1px;
}
.cellaVuota {
width: 140px;
}
<div id="carica">
<form method="post" action="carica2.php">
<label for "n">Inserisci nome:
<input type="text" id="n" name="nome" size="10" />
</label>
<button type="submit">Invia</button>
</form>
<form method="post" action="carica2.php">
<button type="submit" name="logout">Logout</button>
</form>
</div>
<div id="parent">
<div id="lista">
<table id="tabella1">
<tr>
<th>Modello</th>
<th>27.5</th>
<th>29</th>
</tr>
<tr>
<td>Riga 1</td>
<td>Riga 2</td>
<td>Riga 3</td>
</tr>
</table>
<p class="titolo">Bici Mountain Bike</p>
</div>
<div id="scheda">
<p class="titolo">Bici selezionata</p>
<table id="tabella2">
<tr>
<td>Modello</td>
<td class="cellaVuota"></td>
</tr>
<tr>
<td>Misura 27.5</td>
<td class="cellaVuota"></td>
</tr>
<tr>
<td>Misura 29</td>
<td class="cellaVuota"></td>
</tr>
</table>
</div>
</div>
I searched and searched here before post this question (see position and ~top` properties in the CSS code), but I do not figure out how to reach my purpose.

Answer 1

Just add vertical-align: top; to both divs.
You can also remove position: relative; and top: 0; properties