Alignment of paragraphs and headings in CSS - html

Question

I have a design below which I am trying to replicate in HTML and CSS:
Note: I have written text Margin and Padding to make things easy to understand. It will not come in the actual design
At this moment, I am able to get this in my fiddle.
The only thing which is not matching the above design in the fiddle are the paragraphs (eg: Our main goal, Among our biggest, etc) in every box which don't have line break. 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).
The CSS for every box is:
.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;
}

Answer 1

Here is a improved version of your code, just using flexbox, without using floats or anything else.
h2 {
text-align: center;
font-size: 2.8rem;
color: #444444;
}
.row {
display: flex;
flex-wrap: wrap;
padding: 5%;
}
.row>div {
padding: 5%;
background: gray;
margin: 15px;
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: center;
text-align: center;
flex: 1;
box-sizing:border-box
}
<div class="job-openings">
<h2>Seems Interesting? Apply Now</h2>
<div class="row">
<div id="back-end">
<h3>Back-end Developer</h3>
<p> Our main goal is to build and maintain the online platform and...</p>
</div>
<div id="front-end">
<h3>Front-end Web Developer</h3>
<p>Among our biggest priorities are interface design and user experience...</p>
</div>
<div id="graphics">
<h3>Graphics Designer</h3>
<p> We believe in the power of design. Our designers are motivated, creative and...</p>
</div>
<div id="sales">
<h3>Sales & Marketing</h3>
<p>Our Marketing team is focussed on driving growth and building a brand that customers love...</p>
</div>
</div>
</div>
Op's Comment to answer:
Back-end and front-end will come in one row with graphics designer and
sales and marketing in another row.
Assuming you want to have always 2 rows, then you can use flex:0 50% instead of flex:1, in this case flex: 0 calc(50% - 30px) to take in count the margin
h2 {
text-align: center;
font-size: 2.8rem;
color: #444444;
}
.row {
display: flex;
flex-wrap: wrap;
padding: 5%;
}
.row>div {
padding: 5%;
background: gray;
margin: 15px;
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: center;
text-align: center;
flex: 0 calc(50% - 30px);
box-sizing:border-box
}
<div class="job-openings">
<h2>Seems Interesting? Apply Now</h2>
<div class="row">
<div id="back-end">
<h3>Back-end Developer</h3>
<p> Our main goal is to build and maintain the online platform and...</p>
</div>
<div id="front-end">
<h3>Front-end Web Developer</h3>
<p>Among our biggest priorities are interface design and user experience...</p>
</div>
<div id="graphics">
<h3>Graphics Designer</h3>
<p> We believe in the power of design. Our designers are motivated, creative and...</p>
</div>
<div id="sales">
<h3>Sales & Marketing</h3>
<p>Our Marketing team is focussed on driving growth and building a brand that customers love...</p>
</div>
</div>
</div>