Need to adjust heading and text description in HTML

Question

Need to adjust heading and text description in HTML Layouts with description comes under the heading tag. Tried break line tag but unable to accomplish. Here is the code please help. Code:

    <div class="section-div">
        <div class="imgBox"><img src="Images/favicon.png" alt="img">
            <h3>Announcements</h3>
            <br>
            </p>Total positors y Privacy setting y Change every image y Template system_ y y Total number at
            registered
            users Last user registered </p>
        </div>

    </div>
    <div class="section-div">
        <div class="imgBox"><img src="Images/favicon.png" alt="img">
            <h3>TIps</h3>
            </p>Total psitors y Scripto </p>
        </div>
    </div>
    <div class="section-div">
        <div class="imgBox"><img src="Images/favicon.png" alt="img">
            <h3>Tricks</h3>
            </p>Total psitors Testimonials </p>
        </div>
    </div>
    <div class="section-div">
        <div class="imgBox"><img src="Images/favicon.png" alt="img">
            <h3>Announcements</h3>
            </p>Total psitors y Privacy setting Main converns </p>
        </div>
    </div>

CSS:

.section-wrap{
    display: flex;
    align-items: center;
   
    box-shadow: 0 0 0 15px #fff; flex-wrap: wrap;
  }
  .section-wrap > div{  flex-basis: 50%;}

  .imgBox { height: 30px; background: #eee;   display: flex; margin: 20px;
    align-items: center; justify-content: left;
}

Answer 1

I changed your html, also used flex-direction: column for .imgBox, so description comes under the heading tag:

* {
  box-sizing: border-box;
}

.section-div {
  display: flex;
  align-items: center;
  box-shadow: 0 0 0 15px #fff;
  flex-wrap: wrap;
}

.two-section {
  display: flex;
}

img {
  width: 100%;
}

.imgBox {
  flex-basis: 50%;
  background: #eee;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px;
}

<div class="section-div">
  <div class="two-section">
    <div class="imgBox"><img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" alt="img">
      <h3>Announcements</h3>
      <p>Total positors y Privacy setting y Change every image y Template system_ y y Total number at registered users Last user registered </p>
    </div>
    <div class="imgBox"><img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" alt="img">
      <h3>TIps</h3>
      <p>Total psitors y Scripto</p>
    </div>
  </div>

  <div class="two-section">
    <div class="imgBox"><img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" alt="img">
      <h3>Tricks</h3>
      <p>Total psitors Testimonials </p>
    </div>
    <div class="imgBox"><img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" alt="img">
      <h3>Announcements</h3>
      <p>Total psitors y Privacy setting Main converns </p>
    </div>
  </div>
</div>