I'm trying to create 5 columns where each column has a title, image and some text. Each may be a different size. Based on the image width how can I assign that width to the column title and text?
The goal is to have the titles centered above the image and the texts centered below the image and at the same time have all the titles start on the same line, all the images start on the same line and all the texts start on the same line
.column {
display: flex:
flex-direction:column;
}
.row {
display: flex;
justify-content: space-evenly;
}
.row div{
border:solid 1px red;
text-align:center;}<div class='column'>
<div class='row'>
<div>title1</div>
<div>title2<br>title2</div>
<div>title3</div>
<div>title4</div>
<div>title5</div>
</div>
<div class='row'>
<div>
<img src='https://via.placeholder.com/150'>
</div><div>
<img src='https://via.placeholder.com/150'>
</div><div>
<img src='https://via.placeholder.com/350'>
</div><div>
<img src='https://via.placeholder.com/250'>
</div><div>
<img src='https://via.placeholder.com/150'>
</div>
</div>
<div class='row'>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a sagittis lacus, a consectetur mi. Mauris facilisis diam eu dui euismod bibendum. Cras et metus eleifend, sollicitudin nulla ornare, placerat enim. Maecenas in diam in mauris elementum efficitur sed vitae sapien. In hac habitasse platea dictumst. Integer vitae ex non lacus posuere auctor. Quisque nec nibh sed ipsum tempus vulputate et in dui. In dapibus, lacus eget pellentesque lobortis, nunc libero molestie felis, eget sodales nisl magna sit amet metus. Aenean id sapien in ligula iaculis finibus eget id dolor. Aenean non nulla eu ex rhoncus facilisis. Sed efficitur sagittis nulla ultricies venenatis. Vivamus lacinia pulvinar fermentum. Sed mattis tincidunt justo. Morbi finibus cursus lobortis.</div>
<div>Pellentesque hendrerit eleifend lectus. Mauris congue libero quis blandit elementum. Nunc posuere accumsan arcu vitae pellentesque. Pellentesque placerat neque urna, et scelerisque magna sodales sit amet. Nulla consequat mi vel justo vulputate dictum. Phasellus lorem felis, feugiat eget diam mollis, pretium porttitor sem. Etiam viverra sit amet massa sed consectetur. Nam et massa ut massa euismod cursus vel vitae augue. Pellentesque egestas tortor eu odio porttitor tempus.</div>
<div>Quisque sit amet mattis mi. Curabitur vel nunc orci. In vehicula fermentum euismod. Nullam ex justo, sollicitudin nec magna non, malesuada ultricies lacus. Aenean ut scelerisque dolor. Phasellus accumsan volutpat neque ac convallis. Aenean dignissim, felis vitae finibus mattis, ante magna mattis arcu, at ullamcorper nisi sapien eu massa. Nullam vehicula ultricies quam eget finibus. Sed ut fermentum libero, sed accumsan ante. Praesent vel laoreet lacus. Sed interdum, ante sed aliquet auctor, tortor elit viverra turpis, quis posuere nunc erat in purus.</div>
<div>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi sit amet pretium est. Suspendisse dolor orci, lacinia tempus magna ac, tempor rutrum ipsum. Pellentesque tempor erat faucibus faucibus aliquet. Nullam nec aliquam nibh. Mauris et enim facilisis, euismod lectus vitae, tempus ligula. Sed mattis faucibus ligula, at molestie neque sagittis a. Pellentesque eu felis porta, volutpat mauris eu, congue ante. Quisque malesuada sit amet magna vel consectetur. Sed venenatis est et turpis posuere, sit amet pretium erat fringilla. Nunc sit amet nulla nec lectus eleifend faucibus. Donec quam orci, laoreet ut ligula eget, tincidunt auctor ante.</div>
<div>Nunc sed blandit nulla. Cras molestie sem a elit blandit sollicitudin. Curabitur in ex gravida, faucibus felis at, vestibulum nunc. Sed ultricies enim et mi gravida varius a et arcu. Cras id libero leo. Nunc egestas libero dolor, tempus sollicitudin felis varius at. Donec sollicitudin lorem nec ipsum aliquet efficitur. Maecenas interdum libero vitae purus euismod, at fringilla odio posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur pellentesque nisl pellentesque, semper quam ac, commodo tortor.</div>
</div>
</div>
