W3Schools Tryit Editor

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}
</style>
</head>
<body>

<h2>Responsive "Side-by-Side" Images</h2>
<p>How to create side-by-side images with the CSS float property. On screens that are 500px wide or less, the images will stack on top of each other instead of next to each other:</p>
<p>Resize the browser window to see the effect.</p>

</body>
</html>

​x
 
<!DOCTYPE html><html><head><style>* {  box-sizing: border-box;}​.column {  float: left;  width: 33.33%;  padding: 5px;}​/* Clearfix (clear floats) */.row::after {  content: "";  clear: both;  display: table;}​/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */@media screen and (max-width: 500px) {  .column {    width: 100%;  }}</style></head><body>​<h2>Responsive "Side-by-Side" Images</h2><p>How to create side-by-side images with the CSS float property. On screens that are 500px wide or less, the images will stack on top of each other instead of next to each other:</p><p>Resize the browser window to see the effect.</p>​<div class="row">  <div class="column">    <img src="img_snow.jpg" alt="Snow" style="width:100%">  </div>  <div class="column">    <img src="img_forest.jpg" alt="Forest" style="width:100%">  </div>  <div class="column">    <img src="img_mountains.jpg" alt="Mountains" style="width:100%">