How to create layout with image on left and text on right on block in CSS-CodePudding

How to create a layout like in this picture: https://i.stack.imgur.com/RYAuA.png Image on left and text on right. With responsive. Please help me thank you very much.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div className="brand_story_body w-75 d-flex m-auto justify-content-between">

                           <div className="brand_story_description text-start">
                             
                                           <div className="w-50">
                                           <img className="mw-100 mh-100" src="https://i.ibb.co/jT1MGm8/brand-story-body-image.png"/>
                                           </div>
                                      
                                           <div className="w-50">
                                           <p>
How to create mobile-optimized videos in minutes. Not a designer, every team makes a lot of videos. Can be trimmed. Take the first step to your brand's success . How to create mobile-optimized videos in minutes
                                            </p>
                              <button className="py-1 see-more-btn bg-primary border-3 border border-secondary fw-bold px-4">
                                SEE MORE
                             </button>
                                           </div>
                             
                               
                              
                           </div>
                        </div>

CodePudding user response：

You can try this hope it helps

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div >

<div >
  <div >
    <div >
      <div  style="overflow: hidden; width: 100%; height: 100%">
        <img  src="https://i.ibb.co/jT1MGm8/brand-story-body-image.png" />
      </div>
    </div>
    <div >
      <p>How to create mobile-optimized videos in minutes. Not a designer, every team makes a lot of videos. Can be trimmed. Take the first step to your brand's success . How to create mobile-optimized videos in minutes</p>
      <button >
          SEE&nbsp;MORE
       </button>
    </div>
  </div>
</div>
<br><br><br>

CodePudding user response：

This is a working example:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div >
  <div >
    <div >
      <div >
        <img  src="https://i.ibb.co/jT1MGm8/brand-story-body-image.png"/>
      </div>
      <div >
        <p>How to create mobile-optimized videos in minutes. Not a designer, every team makes a lot of videos. Can be trimmed. Take the first step to your brand's success . How to create mobile-optimized videos in minutes </p>
        <button >
          SEE MORE
        </button>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

Simply using Flexbox or Grid. In the example below i used Flexbox. You can find a very good explanation here

.brand_story_description {
  display: flex;
  flex-wrap: wrap;
}

.brand_story_description .w-50 {
  flex: 0 1 50%;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div >

  <div >

    <div >
      <img  src="https://i.ibb.co/jT1MGm8/brand-story-body-image.png" />
    </div>

    <div >
      <p>
        How to create mobile-optimized videos in minutes. Not a designer, every team makes a lot of videos. Can be trimmed. Take the first step to your brand's success . How to create mobile-optimized videos in minutes
      </p>
      <button >
                                SEE MORE
                             </button>
    </div>



  </div>
</div>