I have a container with two other pieces of text inside it - a title and a description, for example:
.item {
box-sizing: border-box;
width: 33%;
text-align: center;
padding: 20px;
border: 1px solid #CCC;
min-height: 200px;
margin: 20px;
}
.item-title {
font-size: 28px;
margin-bottom: 15px;
}
.item-description {
font-size: 12px;
}<div class="item">
<div class="item-title">Title</div>
<div class="item-description">Some descriptive text</div>
</div>
<div class="item">
<div class="item-title">A Much Longer Title</div>
<div class="item-description">Some other descriptive text</div>
</div>Here's a diagram of the desired effect:
What I'd like is for the title to be vertically-centred at the same point (blue line), no matter how many lines it wraps over. The description should always stay underneath, the same distance away from the title, top-aligned (red line). So the blue line doesn't move but the red line can.
What I've tried so far:
Applying a negative Y transform to the title. This worked in that it moved the title up, but the description text did not follow it.
Margins: tried setting a percentage vertical margin but of course this is relative to the parent's width rather than the height of the element, it didn't have the desired effect.
Flexbox: same sort of result as margins.
position: absolute on the title. Works to vertically align the title but then makes it very difficult to align the description.
After experimenting for a while and a lot of reading up, it seems like it might not be possible, but if anyone's managed to solve this I'd be very interested to know how.