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 >
        <div ><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 >
        <div ><img src="Images/favicon.png" alt="img">
            <h3>TIps</h3>
            </p>Total psitors y Scripto </p>
        </div>
    </div>
    <div >
        <div ><img src="Images/favicon.png" alt="img">
            <h3>Tricks</h3>
            </p>Total psitors Testimonials </p>
        </div>
    </div>
    <div >
        <div ><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;
}

CodePudding user response：

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 >
  <div >
    <div ><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 ><img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" alt="img">
      <h3>TIps</h3>
      <p>Total psitors y Scripto</p>
    </div>
  </div>

  <div >
    <div ><img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" alt="img">
      <h3>Tricks</h3>
      <p>Total psitors Testimonials </p>
    </div>
    <div ><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>

CodePudding user response：

First of all you are using .section-wrap class in CSS file that does not exist in your HTML code. Use .section-div class instead and apply the following CSS in it.

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

  .imgBox { height: 30px; background: #eee;   margin: 20px;
}

<div >
        <div ><img src="Images/favicon.png" 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>
    <div >
        <div ><img src="Images/favicon.png" alt="img">
            <h3>TIps</h3>
            </p>Total psitors y Scripto </p>
        </div>
    </div>
    <div >
        <div ><img src="Images/favicon.png" alt="img">
            <h3>Tricks</h3>
            </p>Total psitors Testimonials </p>
        </div>
    </div>
    <div >
        <div ><img src="Images/favicon.png" alt="img">
            <h3>Announcements</h3>
            </p>Total psitors y Privacy setting Main converns </p>
        </div>
    </div>