How to make two text paragraphs to show next to a image (responsive) html css?

Question

I am coming to an issue where I am trying to put two paragraphs text next to the image. One text paragraph on the left side, and middle is the image and on the right side will be the second text paragraph in css/html. All I need is to put those two text next to the images.thanks for the help.

One text paragraph on the left | Image | Second text paragraph on the right.

here is my code:

CSS

#l-img-r-txt,
    #l-txt-r-img {
        display: flex;
    }

.l-img-r-txt_img {
        height: 300px;
        width: 100%;
        display: inline-block;
        
        background-position: center;
        background-repeat: no-repeat;
        
    }

    .l-img-r-txt_txt {
        height: auto;
        width: 100%;
        display: inline-block;
    }

    .l-txt-r-img-img {
        height: 300px;
        width: 100%;
        display: inline-block;
          
        background-position: center;
        background-repeat: no-repeat;
 
    }


    .l-txt-r-img-txt {
        height: auto;
        width: 100%;

        display: inline-block;
        font-weight: bold;
    }

    .x-txt-r-img-txt {

        height: auto;
        width: 100%;

        display: inline-block;
        font-weight: bold;

    }

 

    @media only screen and (min-width: 1000px) {
        .l-img-r-txt_img {
            height: 300px;
            width: 50%;
            float: left;
        }

        .l-img-r-txt_txt {
            height: 300px;
            width: 50%;
            text-align: left;
            padding-right: 30px;
            /* float: right; */
        }

        .l-txt-r-img-img {
            height: 500px;
            width: 900px;
            float: right;
        }

        .l-txt-r-img-txt {
            height: 300px;
            width: 50%;
            text-align: center;
            padding-left: 420px;
            float: left;
            position:  relative;
            bottom: 897px;
        }
         
     
    }
    .x-txt-r-img-txt {
           height: 10px;
            width: 100%;  
              text-align: center;
            /* padding-left: 120px;
            float: left;  */
            position:  relative;
            top: 75px;
            padding-right: 1368px;

    }
 

  

HTML:

    <h1 style="text-align: center; color: black; font-weight: bold;">Sample Calendar</h1> 
                     
                    <center>
                        <div class="x-txt-r-img-txt"> 
                            <ul>
                                Bible Studies - 1- 4 times a month 
                                <br>
                                Assure a parish priest is present - Lectures/Discussions, etc 
                                <br>
                                Worship - Attend Liturgy every Sunday - Attend your parish Vespers  
                                <br>
                                Service - Volunteering events locally/abroad - Homeless Shelter Feeding - Environmental Service projects - Feed your local communities in need  
                                <br>
                                Fellowship - Plan fun events on the same nights as your Bible Studies/Discussions - Plan separate fun events such as bowling, parties, dinners, etc.  
                            
                           </ul> 
                     </div>
             
                     <br>
                      <center> <img src="/images/generalCal.png" alt="genCal" 
                      style="width: 900px; height: 500px; position: relative; top: -400px;"> </center>
                    </center>
                    <div id="l-txt-r-img">
                        <div class="l-txt-r-img-img">
                         
                        </div>
                        <div class="l-txt-r-img-txt">
                     
                          Convention -  St. Geragos LV - January 14-16, 2022 
                          <br>
                          Marathon - March 19, 2022 
                          <br>
                          Sports Weekend - May 27-29, 2022 
                          <br>
                          Senior Retreat - September 3-5, 2022 
                          <br>
                          Service Day Event  - December 17, 2022 
                          <br>
                          Srpazan's Fellowship - December 2022 
                             
                        </div>
                    </div>
 

Answer 1

You can try using flex-direction:row Add it to x-txt-r-img-txt css and whatever inside the div should line up in a row.

Answer 2

Instead of using display:inline-block to make the components go next to each other, use flexbox.

To do this, encapsulate the components you want to be in a row/column in a div/span and then give it a css style.

.class {
   display: flex;
}

By default, it'll be put in rows. Flexbox is a very powerful tool and much better than inline-block (the solution to positioning before flexbox).

Here is a link to what I use to reference flexbox when I forget: LINK