Same Height between child and parent container without Flex - html

Question

I have a section with two articles. I would like that child articles, at all times, get the height of the section, considering that height is auto.
If is possible, I would like to do it without flex.
#section1 {
width: 100%;
height: auto;
display: block;
min-height: 400px;
height: auto;
margin: 0;
padding: 0;
font-size: 18px;
font-family: 'Montserrat';
}
#section1 #article1_section1 {
display: inline-block;
width: 79%;
vertical-align: top;
}
#section1 #article2_section1 {
display: inline-block;
width: 20%;
background-color: #ffc727 !important;
color: #ffc727 !important;
vertical-align: top;
}
<section id="section1">
<article id="article1_section1">
<div class="container_section_m">
<h2 class="h2_m">What is Lorem Ipsum</h2>
<h3 class="h3_m">Lorem ipsum is simply dummy</h3>
<div class="basetitle_m"></div>
<div class="space_m"></div>
<h4 class="h4_m">Where can I get some?</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor diam. Fusce ac justo id ante blandit malesuada sit amet ac lectus. <br> Praesent maximus non mauris ac pretium. Cras vestibulum quam ac lorem tincidunt venenatis.
Suspendisse vehicula sollicitudin orci vel lobortis. Sed quis enim iaculis, facilisis neque nec, dictum mi.</p>
<p>Sed euismod ante leo, vitae vehicula ex molestie quis. Aenean venenatis nibh nisi. Phasellus sagittis interdum mi a auctor.</p>
</div>
</article>
<article id="article2_section1">
-
</article>
</section>

Answer 1

Try below css.
#section1{
width:100%;
height:auto;
display:table;
min-height:400px;
height:auto;
margin:0;
padding:0;
font-size:18px;
font-family: 'Montserrat';
}
#section1 #article1_section1{
display:table-cell;
width:79%;
vertical-align: top;
}
#section1 #article2_section1{
display:table-cell;
width:20%;
background-color: #ffc727 !important;
color: #ffc727 !important;
vertical-align: top;
}
stackblitz demo: https://stackblitz.com/edit/web-platform-dr7imx

Answer 2

display: inline-block; replace display:table-cell; use it
#section1 {
width: 100%;
height: auto;
display: block;
min-height: 400px;
height: auto;
margin: 0;
padding: 0;
font-size: 18px;
font-family: 'Montserrat';
}
#section1 #article1_section1 {
display:table-cell;
width: 79%;
vertical-align: top;
}
#section1 #article2_section1 {
display:table-cell;
width: 20%;
background-color: #ffc727 !important;
color: #ffc727 !important;
vertical-align: top;
}
<section id="section1">
<article id="article1_section1">
<div class="container_section_m">
<h2 class="h2_m">What is Lorem Ipsum</h2>
<h3 class="h3_m">Lorem ipsum is simply dummy</h3>
<div class="basetitle_m"></div>
<div class="space_m"></div>
<h4 class="h4_m">Where can I get some?</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor diam. Fusce ac justo id ante blandit malesuada sit amet ac lectus. <br> Praesent maximus non mauris ac pretium. Cras vestibulum quam ac lorem tincidunt venenatis.
Suspendisse vehicula sollicitudin orci vel lobortis. Sed quis enim iaculis, facilisis neque nec, dictum mi.</p>
<p>Sed euismod ante leo, vitae vehicula ex molestie quis. Aenean venenatis nibh nisi. Phasellus sagittis interdum mi a auctor.</p>
</div>
</article>
<article id="article2_section1">
-
</article>
</section>