Same Height between child and parent container without Flex-CodePudding

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 >

      <h2 >What is Lorem Ipsum</h2>
      <h3 >Lorem ipsum is simply dummy</h3>
      <div ></div>
      <div ></div>
      <h4 >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>

CodePudding user response：

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;
}

CodePudding user response：

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 >

      <h2 >What is Lorem Ipsum</h2>
      <h3 >Lorem ipsum is simply dummy</h3>
      <div ></div>
      <div ></div>
      <h4 >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>