title: Alignment of paragraphs and headings in CSS
body: <p>I have a design below which I am trying to replicate in HTML and CSS:</p>
  
  <p><a href="https://i.stack.imgur.com/YTCLO.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YTCLO.jpg" alt="enter image description here"></a></p>
  
  <p>Note: I have written text <code>Margin</code> and <code>Padding</code> to make things easy to understand. It will not come in the actual design</p>
  
  <p>At this moment, I am able to get this in my <a href="https://jsfiddle.net/8hjudjvo/1/show/" rel="nofollow noreferrer">fiddle</a>. </p>
  
  <p>The only thing which is not matching the above design in the fiddle <code>are the paragraphs (eg: Our main goal, Among our biggest, etc) in every box which don't have line break</code>. I am considering boxes as every job-opening with titles (Back-end .., Front-end .., etc) and paragraphs (eg: Our main goal, Among our biggest, etc).  </p>
  
  <p>The CSS for every box is:</p>
  
  <pre><code>.firstrow {
      display: inline-block;
      width: 100%;
  }
  
  
  .firstrow #front-end {
      text-align: center;
      width: 50%;
      height: 250px;
      float: left;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
      background-size: 100% 100%;
      justify-content: center;
  }
  </code></pre>