Вам нужно добавить свойство vertical-align
к вашим двум дочерним div.
Если .small
всегда короче, вам нужно применить свойство только к .small
. Однако, если любой из них может быть самым высоким, вы должны применить свойство как к .small
, так и к .big
.
.container{
border: 1px black solid;
width: 320px;
height: 120px;
}
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align: top;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
vertical-align: top;
}
Вертикальный выравнивание влияет на ядро встроенного или табличного ящика, и есть большой нумер различные значения для этого свойства. Подробнее см. В https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align .