Menu
I have two divs inside of a parent div and both child divs are display: inline-block. I would like to make it so the first div on the left is vertical-align: top, while the second div is vertical-align: bottom, but I also want to restrict the second div so it's first line of text lines up with the last line of text of the first div and extends downward increasing the height of the parent div instead of upward. How might I accomplish this?
For example, if I have something like so:
<html>
<body>
<div>
<div id="d1" style="width: 50px;display:inline-block;vertical-align:top;">
Here is some text
</div>
<div id="d2" style="width: 50px;display:inline-block;vertical-align:bottom;">
Here is some other text
</div>
</div>
</body>
</html>
I want the first line of d2 to be in line with the last line of d1. So it would look something like this:
Here
is
some
text Here
is
some
other
text
708
asked Dec 13 '25 14:12
Here is one I used grid layout
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 55px 20px 55px;
width: 65px;
}
#d2 {
grid-row: 2;
grid-column: 2;
}<div class="container">
<div id="d1">
Here is some text
</div>
<div id="d2">
Here is some other text
</div>
</div>vertical-align: text-top; on the second div can approximate this
#d1 {
width: 50px;
display: inline-block;
vertical-align: 0.1em; /* rectify the alignment*/
}
#d2 {
width: 50px;
display: inline-block;
vertical-align: text-top;
}<div style="border:1px solid red;">
<div id="d1">
Here is some text
</div>
<div id="d2">
Here is some other text
</div>
</div>
<div style="border:1px solid red;font-size:20px;">
<div id="d1">
Here is some text
</div>
<div id="d2">
Here is some other text
</div>
</div>Another trick using float where you need an extra wrapper:
#d1 {
width: 50px;
display: inline-block;
vertical-align: 0.1em;
}
#d2 {
width: 50px;
display: inline-block;
}
#d2:before {
content: "";
display: inline-block;
}
#d2>span {
float: left;
}<div style="border:1px solid red;">
<div id="d1">
Here is some text
</div>
<div id="d2">
<span>Here is some other text</span>
</div>
</div>
<div style="border:1px solid red;font-size:20px">
<div id="d1">
Here is some text
</div>
<div id="d2">
<span>Here is some other text</span>
</div>
</div>Another idea in case the width are always known and fixed:
.container {
border: 1px solid red;
line-height:1.2em;
}
#d1 {
width: 50px;
}
#d2 {
width: 50px;
margin-top: -1.1em;
transform: translate(50px); /* the width of the first div */
}<div class="container">
<div id="d1">
Here is some text
</div>
<div id="d2">
Here is some other text
</div>
</div>
<div class="container" style="font-size:20px">
<div id="d1">
Here is some text
</div>
<div id="d2">
Here is some other text
</div>
</div>Another one with CSS grid
.container {
border: 1px solid red;
line-height:1.2em;
display:grid;
grid-template-rows:auto 1.1em auto;
justify-content:flex-start;
}
.container > * {
width: 50px;
grid-row-end:span 2;
}
#d2 {
width: 50px;
grid-column:2;
grid-row-start:2;
}<div class="container">
<div id="d1">
Here is some text
</div>
<div id="d2">
Here is some other text
</div>
</div>
<div class="container" style="font-size:20px">
<div id="d1">
Here is some text
</div>
<div id="d2">
Here is some other text
</div>
</div>In all the above solution you may need to adjust the em values based on the font used.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
