In my quest for vertically aligned columns using flexbox, I stumbled upon this solution:
.container {
display: flex;
flex-direction: row;
}
.column {
display: flex;
flex-direction: column;
margin: 0.3em;
}
.column > div:first-child {
font-weight: bold;
}<div class='container'>
<div class='column'>
<div>food</div>
<div>beans</div>
<div>macademia nuts salted and coated with caramel</div>
</div>
<div class='column'>
<div>comments</div>
<div>beans</div>
<div>excellent nutrition</div>
</div>
<div class='column'>
<div>price</div>
<div>3$</div>
<div>20$</div>
</div>
</div>Even though the above method was effective, a new challenge arose when I attempted to incorporate zebra shading into the mix, resulting in visible margins between colors as evidenced in this jsfiddle.
My dilemma now is how to leverage flexbox to create a tabular appearance with aligned columns and seamless zebra shading.