CSS display div as table - html

Question

I have a div with 3 divs inside that's displayed as table like this:
.WKDivTable img {
width: 80px;
height: auto;
padding: 5%;
padding-bottom: 0px;
}
.WKDivTable span {
padding-right: 0px;
font-size: 0.7em;
}
.WKDivTable input[type=number] {
width: 50%;
margin-top: 0px;
height: 30px;
}
.WKDivTable > div {
display: table-cell;
padding: 0%;
}
.WKDivTable {
display: table;
table-layout: fixed;
}
<div class="WKProdukt">
<h3>Quest America</h3>
<div class="WKDivTable">
<div>
<img src="<?php echo $ROOT.'product/img/1020-quest-america.jpg'?>" title="Quest America">
</div>
<div>
<span>Perfektes Modell für Amerikanische Patrioten. Balsaholz Flügel, abgerundete Plastikspitze machen diese Rakete zu einer guten Skill Level 1 Rakete. Landefallschirm ist dabei. Motoren A6-3 rocket B6-4, C6-5 Rocket Engine.</span>
</div>
<div>
<span>Anzahl</span>
<input type="number" title="Anzahl Artikel die sie bestellen" value="1" />
<span class="bold">Preis: 50.-</span>
<span class="bold">Produkt-ID: 1020</span>
<span class="bold">Status: Sofort Lieferbar</span>
</div>
</div>
</div>
The 3. div suddenly has a padding-top:
Can't show a picture because I need reputation lol...
As you can see the content of the 3. div is not on the top like the other 2 divs.
Does someone have an idea what this could be ?

Answer 1

you probably need to adjust the vertical-align of your inner div, e.g.
.WKDivTable > div {
display : table-cell;
padding : 0;
vertical-align : top;
}