How do I display two divs side by side

HTML-CSS
1

I want to display two divs side by side and be responsive so that when the screen is resized one div goes under another instead of squeezing side by side on small screens. and both to be centered on their own side of the screen. (Sorry if I am being too demanding I am new to this divs stuff.)

 <h1 class="w3-xxlarge" style="text-align: center;">What we are dedicated to</h1>
        <br>
        <div class="imagetxt w3-animate-left">
            <img src='../pic/globe-icon.svg' width="400" height="300" alt='Picture of the world'>
            
            <p>
                AYLUS Orlando Florida, is dedicated to helping improve the world we live in without 
                people helping the earth, the environment's problems will aggravate more and more. 
                We also help clean, refurbish, and repair parks, roads, trails, and anything that we 
                commonly use so other people can enjoy their surroundings more by cleaning up animals 
                will also benefit.
            </p>
            
            <img src='../pic/helping-hand-icon-png-23.png' width="400" height="300" alt='Helping hand picture'>
            
            <p>
                We are furthermore dedicated to helping the lives of the poor and needy. By opening 
                drives that collect material that goes to nonprofit organizations, we can help people 
                who are in need and victims of a natural disaster. By doing this, we can save countless 
                lives from hunger, medical issues, and prevent poverty.
            </p>
            
            <img src='../pic/leader.png' width="400" height="300" alt='leadership picture'>
            
            <p>
                Aut dolor aspernatur cupiditate repudiandae eos accusantium inventore molestiae sequi 
                earum perspiciatis qui odio minima magni, iste fugit reiciendis atque tenetur quaerat 
                itaque incidunt, consequuntur esse. Accusantium doloribus odit debitis.
            </p> 
        </div>
            <br>
        <div>
            <p class="w3-xxlarge" style="color: grey; text-align: center;">Our Leaders</p>
            <p class="w3-large" style="color: grey; text-align: center;">Click next to start then scroll down</p>
            <div class="review">
                <div class="review__items">
                    <img src="../pic/memberpics/IMG_0849.jpeg" />
                    <h1>Dylan</h1>
                    <p>
                        Dyan is the president of the AYLUS Orlando, FL foundation.
                        <br><br>
                        "Get to work - Dyan"
                    <p>
                </div>
                <div class="review__items">
                    <img src="../pic/memberpics/IMG_2025.jpeg" />
                    <h1>Kevin</h1>
                    <p>
                        Kevin is the secretary of the AYLUS Orlando, FL foundation.
                        <br><br>
                        "I'm going to go play Clash Royale - Kevin"
                    <p>
                </div>
                <div class="review__items">
                    <img src="../pic/memberpics/IMG_0793.jpeg" />
                    <h1>Nikolas</h1>
                    <p>
                        Nikolas is a vice president of the AYLUS Orlando, FL foundation.
                        <br><br>
                        "Pull that dead tree away - Nikolas" 
                    </p>
          
                </div>
        
                <div class="review__items">
                    <img src="../pic/memberpics/IMG_0013.jpeg" />
                    <h1>Max</h1>
                    <p>
                        Max is the second vice president of the AYLUS Orlando, FL foundation.
                        <br><br>
                        "I can't come - Max"
                    </p>
          
                </div>
                
                <div class="review__button">
                    <button id="prev" onclick="previousReview()">
                        PREV
                    </button>
                      
                    <button id="next" onclick="nextReview()">
                        NEXT
                    </button>
                </div>
            </div>
        </div>

img {
  max-width: 100%;
  height: auto;
}

.imagetxt {
  display: grid;
  padding: 2rem;
  grid-template-columns: 300px 1fr;
  gap: 1rem;
  align-items: center;
  max-width: 800px;
  margin: 0 auto;
  font: 500 100%/1.5 system-ui;
}

.imagetxt img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 650px) {
  .imagetxt {
    display: block;
    font-size: 80%;
  }
  .imagetxt p {
    position: relative;
    margin: -3rem 0 2rem 1rem;
    padding: 1rem;
    background: rgba(155, 155, 155, 0.664);
  }
}

.review {
  background: rgb(255,149,0);
  background: linear-gradient(90deg, rgba(255,149,0,1) 0%, rgba(231,92,48,1) 51%, rgba(221,68,68,1) 100%);
  height: auto;
  width: 270px;
  border-radius: 15px;
  margin: auto;
  padding: 10px;
  margin-top: 30px;
  align-items: center;
}

.review:hover {
  box-shadow: 2px 2px 2px black;
}
.review__items {
  align-items: center;
  justify-content: space-evenly;
  width: 250px;
  padding: 10px;
  align-items: center;
}

.review__items img {
  height: auto;
  width: 250px;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 4px 15px;
}

.review__items h1 {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 20px;
}

.review__items p {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 14px;
}

.review__button {
  text-align: center;
  padding: 10px;
}

.review__button button {
  color: rgb(192, 229, 192);
  background: #dd4444;
  font-weight: bold;
  border: none;
  padding: 10px;
  cursor: pointer;
}

.review__items {
  display: none;
}
2

Hello!

Check out the Flex course on FCC here :slight_smile:

3

that is what I am doign rn and
I have not found any souloutons

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.