How to float pictures with text side by side

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>
                <a href="" class="button">Find out more</a>
        
        </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>
        <a href="" class="button">Find out more</a>
        </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>
                <a href="" class="button">Find out more</a>
        </div>