flexbox with images, fixed size - html

Question

I created this layout, its almost there but I'm struggling with the images and text beside it. I want the entire box to flex at the same time, to keep the images and text responding at the same time.
What am I doing wrong? I think I am suffering from a mental block because this is my first time using flex.
.container {
max-width: 1750px;
}
.venture,
#event-content,
#news-content {
background-color: #eaeaea;
color: #444;
}
.catch {
color: #fff;
text-align: center;
margin: 1vmin 0vmin 0vmin 0vmin;
padding: 20px 50px;
background-color: #3366cc;
}
.tagline {
margin-top: 5%;
text-align: center;
font-weight: bold;
font-size: 130%;
}
#news-content a:link,
#news-content a:hover,
#news-content a:visited {
text-decoration: none;
color: #444;
font-family: FG Font;
font-size: 2vmin;
}
#news-content .btn.btn-primary {
background-color: #3366cc;
font-family: Arial;
border-color: #3366cc;
}
#news-content .tag {
background-color: #ef8b1e;
display: inline-block;
padding: 5px;
border-radius: 0px 0px 5px 5px;
font-size: 1.5vmin;
font-family: FG Font;
}
#news-content .title {
padding: 25px 10px 0px 10px;
}
#event-content .date {
background-color: #ef8b1e;
font-family: FG Font;
font-size: 3vmin;
display: inline-block;
text-align: center;
}
.main-wrapper {
display: flex;
flex-wrap: nowrap;
height: 70vh;
align-items: stretch;
}
.main-wrapper>div {
width: 50%;
min-height: 50vh;
}
.hero-img {
display: flex;
}
.hero-img>div {
margin: 1vmin;
align-self: stretch;
flex-basis: 50%;
}
.info-section {
display: flex;
flex-direction: column;
align-items: stretch;
}
.info-section .media-section {
margin: 1vmin 0vmin;
}
.info-section .venture {
position: relative;
padding: 3vmin 3vmin 2vmin 3vmin;
}
.media-section>div {
display: flex;
flex-direction: row;
}
.media-section>div>div {
flex-basis: 50%;
}
#news-content {
margin-right: .5vmin;
}
#event-content {
margin-left: .5vmin;
}
#news-content,
#event-content {
max-height: 150px;
}
<div class="container">
<div class="main-wrapper">
<div>
<div class="hero-img">
<div><img src="https://via.placeholder.com/100x100" class="img-fluid" alt="Allied Ship" /></div>
<div><img src="https://via.placeholder.com/100x100" class="img-fluid" alt="Allied Ship" /></div>
</div>
<div class="hero-img">
<div><img src="https://via.placeholder.com/100x100" class="img-fluid" alt="Allied Air" /></div>
<div><img src="https://via.placeholder.com/100x100" class="img-fluid" alt="Allied Helicopter" /></div>
</div>
</div>
<div>
<div class="info-section">
<div class="catch">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
</div>
<div class="media-section">
<div>
<div id="news-content">
<div class="tag">In the News</div>
<div class="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<a href="">
<div class="btn btn-primary">Link</div>
</a>
</div>
<div id="event-content">
<div class="date">
<div class="num">12</div>
<div class="month">DEC</div>
</div>
<div class="details">
<div class="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
</div>
</div>
</div>
</div>
<div class="venture">
<h2>Lorem ipsum dolor sit ametn<br>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam diam non mollis sollicitudin. Curabitur sed felis ac urna laoreet finibus nec eu sem. Fusce cursus tortor eget lectus lacinia, id blandit dolor ultrices. Aliquam pellentesque
venenatis turpis, a viverra ante tincidunt vel. Quisque dui orci, viverra id ipsum eget, dictum mattis ante. Aliquam pellentesque massa et euismod efficitur. Aliquam vestibulum velit et lobortis feugiat. Curabitur vulputate quam efficitur,
pellentesque ex quis, tincidunt orci. Donec magna est, ultrices nec pretium nec, porta id nisl. Mauris vitae magna ac sem pellentesque hendrerit. Donec elit justo, pulvinar id leo posuere, venenatis mattis nisl. Maecenas tristique augue ut
odio tincidunt aliquam. Nullam volutpat lobortis eros.</p>
<div class="tagline">LOREM IPSUM</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

Not sure if that you want, the entire container in same column can be done like that :
<pre>
<div class="container">
<div class="main-wrapper">
<div>
<div class="info-section">
<div>
<div class="hero-img">
<div><img src="https://via.placeholder.com/100x100" class="img-fluid" alt="Allied Ship" /></div>
<div><img src="https://via.placeholder.com/100x100" class="img-fluid" alt="Allied Ship" /></div>
</div>
<div class="hero-img">
<div><img src="https://via.placeholder.com/100x100" class="img-fluid" alt="Allied Air" /></div>
<div><img src="https://via.placeholder.com/100x100" class="img-fluid" alt="Allied Helicopter" /></div>
</div>
</div>
<div class="catch">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
</div>
<div class="media-section">
<div>
<div id="news-content">
<div class="tag">In the News</div>
<div class="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<a href="">
<div class="btn btn-primary">Link</div>
</a>
</div>
<div id="event-content">
<div class="date">
<div class="num">12</div>
<div class="month">DEC</div>
</div>
<div class="details">
<div class="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
</div>
</div>
</div>
</div>
<div class="venture">
<h2>Lorem ipsum dolor sit ametn<br>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam diam non mollis sollicitudin. Curabitur sed felis ac urna laoreet finibus nec eu sem. Fusce cursus tortor eget lectus lacinia, id blandit dolor ultrices. Aliquam pellentesque
venenatis turpis, a viverra ante tincidunt vel. Quisque dui orci, viverra id ipsum eget, dictum mattis ante. Aliquam pellentesque massa et euismod efficitur. Aliquam vestibulum velit et lobortis feugiat. Curabitur vulputate quam efficitur,
pellentesque ex quis, tincidunt orci. Donec magna est, ultrices nec pretium nec, porta id nisl. Mauris vitae magna ac sem pellentesque hendrerit. Donec elit justo, pulvinar id leo posuere, venenatis mattis nisl. Maecenas tristique augue ut
odio tincidunt aliquam. Nullam volutpat lobortis eros.</p>
<div class="tagline">LOREM IPSUM</div>
</div>
</div>
</div>
</div>
</div>
</pre>