How to make 2 blocks "div" go in a row - html

Question

I need my two blocks to go in a row one after another, but when the screen resolution decreases, they are placed under each other, that is, in the column
<div>
<div>
<h1>Block1</h1>
</div>
<div>
<h1>Block2</h1>
</div>
</div>

Answer 1

We can use flex (by default flex-direction is row so we don't need any other styling in css) -:
<div class="container">
<div>
<h1>Block1</h1>
</div>
<div>
<h1>Block2</h1>
</div>
</div>
.container{
display: flex;
}
Also this is one way of doing things, flex is not supported everywhere so you can go for inline-block also -:
<div>
<div class="inline">
<h1>Block1</h1>
</div>
<div class="inline">
<h1>Block2</h1>
</div>
</div>
.inline{
display: inline-block;
}

Answer 2

As the div element is known as a block element, you need to use display:inline-block. This means 'if there is space next to the element, place the next inline block element next to it' (in essence).
div {
display: inline-block;
background:tomato;
}
#media only screen and (max-width: 600px) {
div{
display:block;
background:green;
}
<div>
<div>1
</div>
<div>2
</div>
</div>
For your width to then turn back into a block element, you will need to use the media query - something like above.

Answer 3

You should use CSS grid:
<div class="wrapper">
<div>
<h1>Block1</h1>
</div>
<div>
<h1>Block2</h1>
</div>
</div>
Css:
.wrapper{
diplay: grid;
grid-template-columns: 1fr;
}

Answer 4

Try using display:flex and use flexbox to place next to each other when the width is high. When the width reduces the div cols will go down.
.row {
width: 100vw;
display: flex;
flex-wrap: wrap;
}
.cols {
height: 400px;
width: 400px;
margin: 5px 5px 5px 5px;
background-color: blue;
}
<div class="row">
<div class="cols">
</div>
<div class="cols">
</div>
</div>

Answer 5

Like this:
#media all and (max-width: 480px) {
div{
float: left;
width: 98%;
margin-left: 1%;
overflow: hidden;
border: 1px solid #000;
box-sizing: border-box;
padding: 5px;
}
}
Or with class
.wrapper div{
...
}
More about #media
https://developer.mozilla.org/pl/docs/Web/CSS/Media_Queries/Using_media_queries