Currently, I am designing a web layout that requires a flexible column structure with varying line heights. The main objective is to have one column with a higher line-height while ensuring that both paragraph texts in different columns start from the same top position.
Within my layout, I need to be able to display either 1, 2, or 3 columns horizontally, with the title centered above its content.
I have attempted to achieve this using the following HTML and CSS:
However, there seems to be an issue where the text on the right displayed in yellow does not align perfectly with the text on the left.
<html>
<head>
<style>
.columnA {
color: white;
margin-right: 15px;
}
.columnB {
color: yellow;
align-self: start;
margin-bottom: 20px;
vertical-align: top;
}
.comment.title {
display: grid;
color: yellow;
text-align: center;
margin-bottom: 20px;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
.comment.columnA {
color: green;
line-height: 1.4;
}
.comment.columnB {
color: yellow;
line-height: 2.4;
}
.content {
display: grid;
margin-bottom: 20px;
align-content: start;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
.black-background {
background-color: black;
}
</style>
</head>
<body class="black-background">
<div class="comment">
<div class="comment title">
<p class="columnA">TitleA</p>
<p class="columnB">TitleB</p>
</div>
<div class="content">
<p class="comment columnA">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
</p>
<p class="comment columnB">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
</p>
</div>
</div>
</body>
</html>