I am facing a challenge with my CSS HTML code where I need to create a snaking column of labels/values. If one of the values on the left spans two lines, the corresponding one on the right should also adjust its height accordingly.
Currently, I can only achieve this by setting a specific height for the outer container, but I want it to dynamically adjust to the content height.
<!DOCTYPE html>
<html lang="zxx">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
height: 100%;
}
.row {
flex: 1 0 14rem;
display: flex;
flex-direction: column;
}
.column {
flex: 1;
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="column">1) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque labore fuga iste, ut nam quod voluptates vel! Ex est obcaecati itaque architecto totam, sapientea...
<div class="column">2) Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel debitis voluptas fugiat vero dolorum consequuntur ullam magnam perspiciatis, veniam culpa, quos ex voluptatem. Vitae offi...
</div>
<div class="row">
<div class="column">3) Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae vel aspernatur sequi facilis earum assumenda dolorem molestiae sunt, numquam autem. Maiores ullam odit quae velit ex? Iu...
<div class="column">4) Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ab ducimus blanditiis similique saepe necessitatibus placeat, expedita ratione quisquam consequatur a dicta exercitationem molestias, ...
</div>
</div>
</body>
</html>
For reference, here is the desired layout: https://i.sstatic.net/nXtcr.png