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

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  id="whoweare">
  <div >
    <div >
      <div >
        <!-- <div > -->
        <div >
          <!-- <div > -->
          <img id="whoweareimg" src="https://via.placeholder.com/50" 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>
    </div>
  </div>
</section>

CodePudding user response：

Your HTML seems wrong because there was a <div > 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 > and the other <div >) 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  id="whoweare">
  <div >
    <div >
      <div >
        <!-- <div > -->
        <div >
          <!-- <div > -->
          <img id="whoweareimg" src="https://via.placeholder.com/50" 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>
    </div>
  </div>
</section>

CodePudding user response：

<!-- begin snippet: js hide: false console: true babel: false -->

<div >

  <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>