How to float pictures with text side by side - html

Question

I am trying to do two things:
1) Make the three pictures float side by side
2) Create a border filled with the text in the p element below each picture.
Here is an idea of what I am trying to achieve.
Here is what I've done so far...
<div class="fitness-section">
<h1>Get fit</h1>
<img src="images/EssentialWorkouts.png" alt="essentialworkouts" class="essential">
<h5>Essential Workouts</h5>
<p>Going to a gym is definitely the best way to transform and build your body.
However, It is common for many people especially new-gymmers to feel nervous,
intimidated and lost in the gym. There are many effective and essential
workouts that are bound to get you ripped and buff in no time!</p>
Find out more
</div>
<div class="fitness-section">
<img src="images/Motivation.png" alt="motivation" class="motivation">
<p>Have you ever felt unmotivated and lost your will to gym? Fret not, there are
many inspirational quotes and articles here that will help you generate and
maintain a flow of positive attitude to keep you motivated to achieve your
fitness and goals in life!</p>
Find out more
</div>
<div class="fitness-section">
<h1>Get fit</h1>
<img src="images/Shoe.png" alt="shoe" class="shoe">
<p>Working out in the gym with a proper attire is an absolute neccessity to achieve
the best workout possible. Wearing attire that is too tight or too loose will
definitely affect your workouts. Discover and find out what you should and
should not be wearing in the gym.</p>
Find out more
</div>

Answer 1

Here's some work to start you off.
html, body {
box-sizing: border-box;
}
h1 {
text-align: center;
}
.wrapper {
text-align: center;
}
p {
text-align: left;
margin-top: 20px;
border: 1px solid #000;
padding: 10px;
height: 150px;
}
.fitness-section {
display: inline-block;
vertical-align: top;
padding: 10px;
margin-right: -4px;
width: 300px;
}
https://codepen.io/anon/pen/MvyeEN

Answer 2

I can recommend you, to use diffrent classes for your boxes
<div class="fitness-section div1">
<h1>Get fit</h1>
<img src="images/EssentialWorkouts.png" alt="essentialworkouts" class="essential">
<h5>Essential Workouts</h5>
<p>Going to a gym is definitely the best way to transform and build your body.
However, It is common for many people especially new-gymmers to feel nervous,
intimidated and lost in the gym. There are many effective and essential
workouts that are bound to get you ripped and buff in no time!</p>
Find out more
</div>
<div class="fitness-section div2">
<img src="images/Motivation.png" alt="motivation" class="motivation">
<p>Have you ever felt unmotivated and lost your will to gym? Fret not, there are
many inspirational quotes and articles here that will help you generate and
maintain a flow of positive attitude to keep you motivated to achieve your
fitness and goals in life!</p>
Find out more
</div>
<div class="fitness-section div2">
<h1>Get fit</h1>
<img src="images/Shoe.png" alt="shoe" class="shoe">
<p>Working out in the gym with a proper attire is an absolute neccessity to achieve
the best workout possible. Wearing attire that is too tight or too loose will
definitely affect your workouts. Discover and find out what you should and
should not be wearing in the gym.</p>
Find out more
</div>
And for style use this:
.fitness-section {
width: 30%;
}
.div1 {
float: left;
background-color: red;
margin: 15px 15px;
}
.div2 {
float: left;
background-color: blue;
margin: 15px 15px;
}
div3 {
float: right;
background-color:yellow;
margin: 15px 15px;
}