Add align-items: flex-start; to the main flex-container. This will cause them to only become as high as their respective content tells them.
.page_contents {
width: 100%;
display: flex;
flex-direction: row;
align-items: flex-start;
}
.content {
width: 70%;
margin-top: 80px;
margin-left: 2.5%;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin-bottom: 5px;
display: flex;
flex-direction: row;
padding-bottom: 21px;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
align-items: center;
box-shadow: 0px 0px 0px 1px rgb(204, 204, 204) inset;
}
.ad_bar {
width: 24%;
margin-top: 80px;
margin-left: 1%;
background-color: #fff;
border-radius: 5px;
box-shadow: 0px 0px 0px 1px rgb(204, 204, 204) inset;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}<div class="page_contents">
<div class="content">
<div class="info">
<h1>End Sars Protests</h1>
<p class="author"><i class="fas fa-user"></i> Brendan Rhatigan</p>
<p class="date"><i class="fas fa-calendar-alt"></i> 14/1/21</p>
<p class="share"><i class="fas fa-share-alt"></i> Share</p>
</div>
<div class="map"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d710218.9176297175!2d6.946767336638483!3d9.206146371825788!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zOcKwMDcnNDEuMiJOIDfCsDI3JzQ0LjciRQ!5e0!3m2!1sen!2suk!4v1610648394834!5m2!1sen!2suk" width="580" height="200" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe></div>
</div>
<div class="ad_bar">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt esse sunt tenetur debitis earum natus totam quia eveniet, in officia, mollitia praesentium facere at ullam veritatis, quos sapiente! Quaerat, nobis! Lorem ipsum dolor sit amet consectetur
adipisicing elit. Excepturi nostrum sapiente error id aut ad ducimus omnis dicta molestias eaque? Quasi, quisquam adipisci consectetur in quibusdam tempore numquam neque reprehenderit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit
maiores delectus eum nemo, quod sint eligendi impedit dolore amet aspernatur ipsum suscipit quidem eaque voluptatibus, temporibus omnis aliquam animi totam! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates et in accusamus eveniet
quas! Culpa exercitationem fuga laborum repellat beatae, quae libero et. Maxime iste, dignissimos rerum ut ipsa aperiam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi facilis possimus voluptatibus inventore perferendis consectetur
sapiente quisquam totam! Doloribus odio a enim nobis! Accusantium perspiciatis rerum temporibus esse nam? Enim?</p>
</div>
</div>