html - Place two banner images side by side on mobile

Question

I am trying to place two banner images (1024 x 609) side by side. Website width is 1803px. However It keeps showing one image in a row like:

image1

image2

I wanted to make it like:

image1image2

This is what I tried (Copied from w3schools.com)

<style>
* {
  box-sizing: border-box;
}
.column {
  flex: 50%;
  padding: 0px;
}
/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

</style>

<div class="row">
  <div class="column">
    <img src="https://cdn.shopify.com/s/files/1/1352/5175/files/sample.jpg?v=1611329566" alt="Sample" style="width:100%">
  </div>
  <div class="column">
    <img src="https://cdn.shopify.com/s/files/1/1352/5175/files/sample.jpg?v=1611329566" alt="Sample" style="width:100%">
  </div>
</div>

question from:https://stackoverflow.com/questions/65848298/place-two-banner-images-side-by-side-on-mobile

Answer 1

after change .row section in CSS to

.row {
  display: flex;
}

it works like I intended