Responsive HTML without framework

A simple example using @media query . For% s of% s to be responsive you can use as a unit of measure the percentage div (or % , of viewport width ).

In your case, two% with% s as if they were two columns, half a half, you could use:

body{
   margin: 0;
}

main{
   display: flex;
}

.coluna{
   width: 46%;
   background: yellow;
   padding: 2%;
}

@media screen and (max-width: 600px){
   main{
      display: block;
   }

   .coluna{
      width: 100%;
   }
}

<main>
   <div class="coluna">
      div 1
   </div>
   <div class="coluna">
      div 2
   </div>
</main>

Where 2% means that when the width of the screen is up to 600 pixels, the @media rule , that is, up to 600 pixels wide of the screen, the two div s will occupy the total width of the screen ( (max-width: 600px) ) being one below the other. Above% with% of one will stand side by side.

This value of div you should set according to the content of each 100% , which you think is best suited visually. It may be a bit larger or smaller, it will depend on your layout .

It should be remembered that the content of each 600px should also have styles that adapt to the width of the% s-country% s (images, internal divs, texts, etc.). Everything must have relative dimensions.

You can also create other 600px to change the properties of elements for each screen dimension, it will also depend on your layout and what you want to do.

In responsiveness everything is relative, it will depend on the content you are going to use, define maximum dimensions (as div ), minimums (as div ), and a multitude of criteria based on the content you want to display

You also need to include the tag below in div so that the mobile browser recognizes the screen's dimensions and scale ( more about this in this link ):

<meta name="viewport" content="width=device-width, initial-scale=1.0">

You can take a look at this tutorial on responsiveness.

Ronaldo as you put the tags HTML5 and CSS3 I'll give you two different ways to do this, one with display-gri d and another with display-flex .

First I'll leave some comments.

Avoid using float to build layout. This floats technique was used in a time where CSS features were very limited. Float actually serves to align contents to the right or left of each other, such as texts and images, texts and tables, etc., not to build a grid, as you can consult in the Mozilla documentation the correct use of float : < a href="https://developer.mozilla.org/en/docs/Web/CSS/float"> link In short, float is currently not a good practice in building grids

About using padding in%, imagine that your page will open on a 4K monitor in the boardroom, what will happen is that% values correspond to a proportion of screen horizontal), and the larger the screen the greater its padding ,. So if 2% on an HD monitor gets cool, imagine what 2% are on a 4K monitor that is 2x the "wider" your pedding will get 2x larger, for example going from 16px to 32px which may be something undesirable. p>

I made the treatment responsive so that the columns occupy the whole line in screens of up to 768px, but in case you do not want this just delete what is inside the @media in css p>

Now the options with flex and grid

.container-flex {
  display: flex;
  box-sizing: border-box;
  border: 2px solid black;
  padding: 1rem auto;
  justify-content: space-around;
  padding: 1rem 0.5rem;
}
.container-flex div {
  box-sizing: border-box;
  border: 2px solid black;
  width: calc(50% - 1rem);
}
@media screen and (max-width: 768px) {
    .container-flex {
        flex-wrap: wrap;
    }
    .container-flex div  {
        width: calc(100% - 1rem);
        margin-top: 1rem;
    }
    .container-flex div:first-child {
        margin-top: 0;
    }
}

<div class="container-flex">
  <div>lado a</div>
  <div>lado b</div>
</div>

Option with grid

.container-grid {
  box-sizing: border-box;
  padding: 1rem;
  border: 2px solid black;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem;
}
.container-grid div {
  box-sizing: border-box;
  border: 2px solid black;
}
@media screen and (max-width: 768px) {
    .container-grid {
        grid-template-columns: 1fr;
    }
}

<div class="container-grid">
  <div>lado a</div>
  <div>lado b</div>
</div>