How to align image and text side by side? HTML CSS Flexbox - html

Question

Right now the text aligns underneath the image. I want the text to be beside the image vertically. I tried to add flex-direction: column and justify-content: center but it's not working. I also tried float and it didn't work. I can't figure out how to align the text and image side by side. How can I make it so that they align beside each other? Are there errors in my code?
.whoweare {
padding: 80px 0px 50px;
background-color: #000000;
}
.whoweare #whoweareimg {
width: 100%;
min-width: 200px;
}
.whoweare .content {
-webkit-display: flex;
display: flex;
flex-wrap: wrap;
/* flex-direction: column; */
/* justify-content: center; */
}
.whoweare .content .box {
/* padding:5px;
flex:0 0 100%;
max-width: 100%; */
padding: 5px;
flex: 0 0 100%;
max-width: 100%;
}
.whoweare .content #whoweareimg {
width: 50%;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
padding: 30px;
}
.whoweare .content h2 {
font-size: 50px;
font-weight: 500;
margin: 20px;
color: #ffffff;
padding: 0px 0px 20px;
}
.whoweare .content p {
font-size: 20px;
line-height: 50px;
color: #ffffff;
margin: 20px;
padding: 0px 0px 20px;
font-family: 'Open Sans', sans-serif;
}
<section class="whoweare" id="whoweare">
<div class="container">
<div class="content">
<div class="box text wow slideInRight">
<!-- <div class="class-items"> -->
<div class="item wow bounceInUp">
<!-- <div class="item-img"> -->
<img id="whoweareimg" src="https://via.placeholder.com/50" alt="classes" />
</div>
<div class="box text wow slideInRight">
<h2>Who we are</h2>
<p>UNDRGRND Muscle & Fitness, where street culture meets the bodybuilding and fitness lifestyle. Our goal is to provide our members with a unique state of the art training experience in the Vaughan/GTA.
</br>
</br>
Experience a one of a kind training atmosphere to help fuel workouts like no other. Exclusive training sessions from IFBB pro athletes will be available in order for members to reach their lifestyle and/or contest prep goals. The facility will provide the best fitness equipment on the market ranging from Atlantis, Cyber, Arsenal, and more.
</br>
</br>
We are all part of a family and all in this together here at UNDRNRGD.</p>
</div>
</div>
</div>
</div>
</section>

Answer 1

Your HTML seems wrong because there was a <div class="box text wow slideInRight"> nested inside another, but in any case here is the code I came up with to solve your problem.
The idea is that .whoweare .content .box:first-child is your flex container, and its two children (<div class="item wow bounceInUp"> and the other <div class="box text wow slideInRight">) will be aligned side by side.
.whoweare {
padding: 80px 0px 50px;
background-color: #000000;
}
.whoweare #whoweareimg {
width: 100%;
min-width: 200px;
}
.whoweare .content .box {
padding: 5px;
max-width: 100%;
}
.whoweare .content .box:first-child {
display: flex;
}
.whoweare .content #whoweareimg {
width: 50%;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
padding: 30px;
}
.whoweare .content h2 {
font-size: 50px;
font-weight: 500;
margin: 20px;
color: #ffffff;
padding: 0px 0px 20px;
}
.whoweare .content p {
font-size: 20px;
line-height: 50px;
color: #ffffff;
margin: 20px;
padding: 0px 0px 20px;
font-family: 'Open Sans', sans-serif;
}
<section class="whoweare" id="whoweare">
<div class="container">
<div class="content">
<div class="box text wow slideInRight">
<!-- <div class="class-items"> -->
<div class="item wow bounceInUp">
<!-- <div class="item-img"> -->
<img id="whoweareimg" src="https://via.placeholder.com/50" alt="classes" />
</div>
<div class="box text wow slideInRight">
<h2>Who we are</h2>
<p>UNDRGRND Muscle & Fitness, where street culture meets the bodybuilding and fitness lifestyle. Our goal is to provide our members with a unique state of the art training experience in the Vaughan/GTA.
</br>
</br>
Experience a one of a kind training atmosphere to help fuel workouts like no other. Exclusive training sessions from IFBB pro athletes will be available in order for members to reach their lifestyle and/or contest prep goals. The facility will provide the best fitness equipment on the market ranging from Atlantis, Cyber, Arsenal, and more.
</br>
</br>
We are all part of a family and all in this together here at UNDRNRGD.</p>
</div>
</div>
</div>
</div>
</section>

Answer 2

<!-- begin snippet: js hide: false console: true babel: false -->
<div class="content">
<div>
<img id="whoweareimg" src="https://via.placeholder.com/50x250" alt="classes" />
</div>
<div>
<h2>Who we are</h2>
<p>UNDRGRND Muscle & Fitness, where street culture meets the bodybuilding and fitness lifestyle. Our goal is to provide our members with a unique state of the art training experience in the Vaughan/GTA.
<br>
<br> Experience a one of a kind training atmosphere to help fuel workouts like no other. Exclusive training sessions from IFBB pro athletes will be available in order for members to reach their lifestyle and/or contest prep goals. The facility will
provide the best fitness equipment on the market ranging from Atlantis, Cyber, Arsenal, and more.
<br>
<br> We are all part of a family and all in this together here at UNDRNRGD.</p>
</div>
</div>