I am attempting to create two text/image boxes side by side, where one box dictates the height of both on desktop. In this scenario, the leftcol box should expand its background color to match the size of rightcol and center the content. On mobile devices, the boxes should not expand and instead display each box in its own row. I also require some padding to enhance the visual appearance. The padding-right and padding-left properties seem inadequate to properly separate the content. Although flexbox may be a solution for this issue, I am currently struggling to implement it.
.leftcol {
float: left;
width: 45%;
padding: 10px 20px 10px 10px;
background-color: #ff22aa
}
.rightcol {
float: right;
width: 45%;
padding: 10px 10px 10px 20px;
background-color: #aa4422
}
@media screen and (max-width: 800px) {
.leftcol,
.rightcol,
.boxes,
div.boxes:nth-of-type(even),
div.boxes:nth-of-type(odd){
float: none;
width: auto;
padding: 0px;
}
}<div class="colgroup">
<div class="leftcol">
<h3>Bal</h3>
<p>blub blub</p>
</div>
<div class="rightcol">
<h3>Bla right</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magma aliqyam erat, sed dam volu tammodo magnequiyamerastesretemporiniduntlaboretdoloietgueiug'</p>
</div>
</div>