Menu
I have three text items in a container. The middle text has the larger font. I would like to align the top the first item to the top of the second item.
.container {
border: 1px solid black;
}
.container p {
display: inline-block;
}
.large {
font-size: 50px;
}<body>
<div class="container">
<p class="first">One</p>
<p class="large">Two</p>
<p>Three</p>
</div>
</body>https://jsfiddle.net/7ofrravh/2/
The only way I can think of to do this is to use absolute position but this gets out of line when I change the screen size. I want to be able to change the size of the screen and have everything stay in place. Does anyone know a way to do this?
677
asked Oct 27 '25 08:10
Change CSS:
.container {
border: 1px solid black;
}
.container p {
display: inline-block;
vertical-align:top;
margin:0;
}
.large {
font-size: 50px;
line-height:1;
}
.container {
border: 1px solid black;
}
.container p {
display: inline-block;
vertical-align:top;
margin:0;
}
.large {
font-size: 50px;
line-height:1;
}<body>
<div class="container">
<p class="first">One</p>
<p class="large">Two</p>
<p>Three</p>
</div>
</body>Here is the edited version of your code
.container {
border: 1px solid black;
}
.container p {
display: inline-block;
margin:0;
}
.container p.first {
vertical-align:top;
line-height:40px;
}
.large {
font-size: 50px;
}<body>
<div class="container">
<p class="first">One</p>
<p class="large">Two</p>
<p>Three</p>
</div>
</body>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
