Parent block doesn't shrink after children wrap - html

Question

What it looks like:
When I decrease the browser's window size I get:
BUT I WANT IT TO LOOK LIKE THIS WITHOUT USING FLEXBOX:
Here's codepen
CODE:
#one {
background-color: grey;
text-align: center;
}
#two {
display: inline-block;
text-align: left;
padding: 10px;
background-color: lightgrey;
}
.square {
display: inline-block;
width: 300px;
padding-bottom: 300px;
background-color: black;
}
<div id="one">
<div id="two">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</div>

Answer 1

Without using Flexbox, you need #media queries for that.
changed your values to make it responsive
*,
*::before,
*::after {
box-sizing: border-box
}
body {
margin: 0
}
#one {
background-color: grey;
max-width: 900px;
margin: 0 auto;
font-size: 0 /* inline-block gap fix */
}
#two {
padding: 10px;
background-color: lightgrey;
}
.square {
display: inline-block;
width: calc((100% / 3) - 10px);
padding-bottom: 300px;
background-color: black;
margin:5px
}
#media (max-width: 768px) {
.square {
width:calc((100% / 2) - 10px)
}
}
<div id="one">
<div id="two">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</div>

Answer 2

Try this,
#two {
display: inline-block;
text-align: left;
padding: 10px;
background-color: lightgrey;
width:100%;
}
.square {
display: inline-block;
width: 32.5%;
padding-bottom: 300px;
background-color: black;
}

Answer 3

Here's the solution using Media queries codepen
* {
margin: 0px;
}
#one {
background-color: grey;
text-align: center;
font-size: 0;
}
#two {
display: inline-block;
text-align: left;
padding: 10px;
background-color: lightgrey;
}
.square {
display: inline-block;
width: 300px;
padding-bottom: 300px;
background-color: black;
}
#media screen and (max-width: 920px) {
#two {
width: 600px;
}
}
#media screen and (max-width: 600px) {
#two {
width: 300px;
}
}
<div id="one">
<div id="two">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</div>