<div> element does not adhere to the Display: inline property - html

Question

I am new to web development and I am facing an issue. I want to display three div's next to each other. So, I applied display:inline-block to the three div's. But, still the Div's are stacked one below another and not next to each other.
Codepen link: https://codepen.io/shanjaynithin/pen/XWmBPYd
Desired output:
Sample image

Answer 1

You can use flex for this:
.container {
display: flex;
width: 100%;
justify-content: space-between;
}
.boxes {
margin: 10px;
border: 1px solid red;
}
img{
height:100px;
width:100px;
}
<div class="container">
<div class="boxes">
<img src="http://placekitten.com/301/301" alt="snappy-process">
<h3>Snappy Process</h3>
<p>Our application process can be completed in minutes, not hours. Don’t get
stuck filling in tedious forms.</p>
</div>
<div class="boxes">
<img class="eg" src="http://placekitten.com/301/301" alt="affordable-prices">
<h3 >Affordable Prices</h3>
<p>We don’t want you worrying about high monthly costs. Our prices may be low,
but we still offer the best coverage possible.</p>
</div>
<div class="boxes">
<img src="http://placekitten.com/301/301" alt="people-first">
<h3>People First</h3>
<p>Our plans aren’t full of conditions and clauses to prevent payouts. We make
sure you’re covered when you need it.</p>
</div>
</div>

Answer 2

.container {
display: flex;
width: 100vw;
}
<div class="container">
<div class="boxes">
<img src="images/icon-snappy-process.svg" alt="snappy-process">
<h3>Snappy Process</h3>
<p>Our application process can be completed in minutes, not hours. Don’t get
stuck filling in tedious forms.</p>
</div>
<div class="boxes">
<img class="eg" src="images/icon-affordable-prices.svg" alt="affordable-prices">
<h3>Affordable Prices</h3>
<p>We don’t want you worrying about high monthly costs. Our prices may be low,
but we still offer the best coverage possible.</p>
</div>
<div class="boxes">
<img src="images/icon-people-first.svg" alt="people-first">
<h3>People First</h3>
<p>Our plans aren’t full of conditions and clauses to prevent payouts. We make
sure you’re covered when you need it.</p>
</div>
</div>

Answer 3

<div id="app">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
#app div{
float: left;
width: 200px;
height: 200px;
border: 1px solid;
}