You will have to add few more divs having table properties like :demo
.table {
display: table;
width: 88%;
}
.row {
display: table-row;
}
Question
I have a special structure of divs and want for both divs the same height without setting height in css. Can anybody help me and explain why the following jsFiddle doesn't work as I want it?
I've tried a lot of things from similar questions here. But nothing works for me perfectly.
<div class="div-table">
<div>
<div>Date</div>
<div style="white-space:nowrap">
<div class="input-field">
<input>
</div>
<div class="input-img">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAfJJREFUSEutlquSAjEQRSORSCQSiUQikUgkEonE8QlIPgGJRCKRSCQSiURm96Rysz0hM5t93KquSbrTzzQdnK/E5XLx5/O5QbXodHK73fxqtfKDwcA7596o3+/75XL5rcOik8fjEZStweFw6KfTaaLRaNSQw7ter9FCE29OOIhBKeOsTZlMN5tNyIizvV7PH4/HKP1CwwnGpEBk9/s9SrpB5pRVgeWOkhMMKgOi/w12u13KiEYRkpP5fJ4y+AvW63WwMx6PIyc6oUyKgNQFeKISSvLX65W6UWULUnUSUQhW2a4tLM+uVbbJZBL2Ds+6bLpFyI3me2B5do1NqgKPu3ZcEBv63gJeTjm65Lrj/X7vHXVjA/M/sd1ug93wDZ4+NzVtyzmoBtauOxwOYbNYLKK4HbUOgDJhIjiGGxt1Qhd+4kQTIHTa8/kMnQCxFkoG4YksSjxNj9BYMGazWWDgVSgpllA6p47FEQhSdRi/VHpckAFrxPJymUDp4XMfIJ1g1iDgwnJYg1AX1Eh2RCUNNQBUehNqwAzUL71R+vgNUG/nh2pAYBpPdJbFW+4abhAlPJ1OUVIG0fM8SCd3AIoFJir754EuYUJzXzjly6Xad54ytWXfeot0GUr2vS8RwRCAfYdytDqxoCRED1EasmBd99/L+w8meYWhCGsXpAAAAABJRU5ErkJggg==">
</div>
</div>
</div>
Solution
You will have to add few more divs having table properties like :demo
.table {
display: table;
width: 88%;
}
.row {
display: table-row;
}