I am attempting to create a content row consisting of 4 divs:
1 container div 3 divs within the container: 1 image - taking up the full height 2 text - sharing the height, but each on a separate line.
It should resemble the following: https://i.sstatic.net/ErhBp.png
I am unsure which CSS position/display properties to use. The possibilities seem endless and I have not been able to find a working combination. In addition to the code in the example, I have experimented with different combinations of CSS display properties like block, inline-block, and more.
This is the code I have tested:
div.contentItemDiv {
display:inline-flex;
height:80px;
width:100%;
margin-bottom:10px;
}
div.picItemDiv {
display:flex;
height:100%;
width:20%;
border:1px dashed;
}
div.itemTitleDiv {
display:flex;
height:30px;
flex-wrap: nowrap;
width:40%;
}
div.itemInfoDiv {
display:flex;
height:50px;
width:40%;
overflow:hidden;
}<div class="contentItemDiv">
<div class="picItemDiv"><img src="pic.jpg" ></div>
<div class="itemTitleDiv">a title</div>
<div class="itemInfoDiv">some content</div>
</div>Thank you!