Controlling and aligning paragraphs in CSS

Question

I have this problem footer with three inline container

The paragraphs are seem to be pushing the title upwards instead of filling the space downwards! I want to have the headings all at the same height! What am I doing wrong?

.section5 {
  position: relative;
  height:562px;
  margin:  0px 64px;
  background-color: #ad7464;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  text-align: center;

}


.sign2 {
  text-align: center;
  position: relative;
  top:20px;
  bottom: 20px;

}

.left {
  display: inline-block;
  width: 40%;
  max-width: 350px;
  min-height: 220px;
  border-right: solid 2px rgba(255, 255, 255, 0.5);
  padding-right: 50px;

}

.right {
  display: inline-block;
  width: 40%;
  max-width: 350px;
  min-height: 220px;
  border-left: solid 2px rgba(255, 255, 255, 0.5);
  padding-left: 50px;


}

.middle {
  display: inline-block;
  width: 40%;
  max-width: 450px;
  min-height: 200px;
  margin: 0px 20px;
}

  <div class="section5">
      <div class="sign2">
        <img src="img/sign2.png" alt="Beauty Secrets Logo" /></div>
      <div class="wrapper">
        <div class="left ">
          <h3>Conact us</h3>
          <p class="paragraph bottom">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
          </p>
        </div>
        <div class="middle ">
          <h3>Conact us</h3>
          <p class="paragraph bottom">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
          </p>
        </div>
        <div class="right ">
          <h3>Conact us</h3>
          <p class="paragraph bottom">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
          </p>
        </div>
      </div>
    </div>

Answer 1

You should add vertical-align: top to your left, middle, and right classes.

.section5 {
  position: relative;
  height: 562px;
  margin: 0px 64px;
  background-color: #ad7464;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  text-align: center;
}

.sign2 {
  text-align: center;
  position: relative;
  top: 20px;
  bottom: 20px;
}

.left {
  display: inline-block;
  width: 40%;
  max-width: 350px;
  min-height: 220px;
  border-right: solid 2px rgba(255, 255, 255, 0.5);
  padding-right: 50px;
  vertical-align: top;
}

.right {
  display: inline-block;
  width: 40%;
  max-width: 350px;
  min-height: 220px;
  border-left: solid 2px rgba(255, 255, 255, 0.5);
  padding-left: 50px;
  vertical-align: top;
}

.middle {
  display: inline-block;
  width: 40%;
  max-width: 450px;
  min-height: 200px;
  margin: 0px 20px;
  vertical-align: top;
}

<div class="section5">
  <div class="sign2">
    <img src="img/sign2.png" alt="Beauty Secrets Logo" /></div>
  <div class="wrapper">
    <div class="left ">
      <h3>Conact us</h3>
      <p class="paragraph bottom">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
      </p>
    </div>
    <div class="middle ">
      <h3>Conact us</h3>
      <p class="paragraph bottom">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
      </p>
    </div>
    <div class="right ">
      <h3>Conact us</h3>
      <p class="paragraph bottom">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
      </p>
    </div>
  </div>
</div>

Answer 2

Attempt to put the margin-top of the paragraph elements to a set size so you can close the gap between the header and paragraph.