(HTML CSS) trying to make certain div responsive - html

Question

I made 2 divs inside container div, and I gave them the element inline block, I wanted them to be side by side. like 1 > 2, not on top of each other.
they look great in my screen size (24inch)
but once the screen size is going down, instead of getting smaller the divs will lay on top of each other
could you help me making them responsive?
html
<div class="exampleboxcontainermainpage">
<div class="exampleboxmainpage">
<h1>create social media Buttons with html and css</h1>
<br>
<div class="socialmediacontainer">
</div>
<br />
<br />
<br />
<br />
<br />
<br>
</div>
<div class="exampleboxmainpage2">
<div class="exampleinsideboxmainpage">
<pre class="prettyprint default">
<!-- Start of showing code -->
<xmp>
<div class="socialmediacontainer">
</div>
</xmp>
<!-- !!!!! End of showing Code !!!!!-->
</pre>
</div>
<button onclick="window.location.href = 'tryyourselfcodes/howto_howto_social_button.php'; " style="left:30px;" class="buttontest">
Try yourself >>
</button>
</div>
</div>
css
.exampleboxcontainermainpage{
padding-left:100px;
}
.exampleboxmainpage {
background-color: #f3f4fa;
border-style: unset;
/* padding: 23px; */
text-align: center;
width: 800px;
height: 400px;
position:relative;
display: inline-block;
bottom:24px;
}
.exampleboxmainpage2 {
background-color: #f3f4fa;
border-style: unset;
padding: 31px;
text-align: center;
width: 900px;
height: 400px;
position:relative;
display: inline-block;
}
.exampleboxmainpage h3 {
padding-bottom: 10px;
display: inline-block;
}
.examplebox button {
display: inline-block;
text-align: center;
}
.exampleinsideboxmainpage {
background-color: black;
text-align: center;
width: 700px;
display: inline-block;
border-style: unset;
}
.exampleinsideboxmainpage p {
font-family: "Roboto", sans-serif;
font-size: 20px;
color: white;
overflow-wrap: break-word;
display: inline-block;
}

Answer 1

Welcome to SO!
Try to use flex as its responsive and easy to use
And on break-screen(below 767px mobile) i just change its direction to
column from row
* {
box-sizing: border-box;
}
.container {
display: flex;
width: 100%;
flex-flow: row wrap;
}
[class*="box--"] {
display: flex;
margin: .25rem;
height: 2rem;
padding: .25rem;
color: white;
}
.box--half {
background: blue;
flex: 1 1 30%;
}
#media all and (max-width: 767px) {
.container{
flex-direction: column;
}
}
<div class="container">
<div class="box--half">1</div>
<div class="box--half">2</div>
</div>
Read more about flex here

Answer 2

If you resist to use inline display instead advanced one like flex or grid you can use media queries to show your div under each other in smaller screen, for example I use 800px for breakpoint. You can use display: block:
.container>div {
display: inline-block;
width: 200px;
height: 200px;
background: gray;
text-align: center;
line-height: 200px;
}
#media all and (max-width: 800px) {
.container>div {
display: block
}
}
<div class="container">
<div>Content 1</div>
<div>Content 2</div>
</div>