title: How to set child div height same as parent
body: <p>May be it is a duplicate question . Others' are not matching with my requirement <br>
  i have 3 child div(secound-div-inner-single(class name)). <br>
    I have to set the height of this 3 div same as the height of parent 
  div(secound-div-inner) or simply 3 div with same height as per the height of largest one <a href="https://i.stack.imgur.com/PNXWm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PNXWm.png" alt="Click here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    .secound-div {
          padding: 2rem 1rem;
          margin-bottom: 1rem;
          background-color: #333;
          border-radius: 0.3rem;
          margin-top: 1rem;
          display: inline-block;
          width: 100%;
      }
      
      .secound-div-letter-color {
          color: #fff;
      }
      
      .secound-div-heading {
          color: #e9e03b;
          text-align: center;
          font-family: 'Times New Roman';
      }
      
      .labels {
          color: #e9e03b;
          text-align: center;
          font-family: 'Times New Roman';
      }
      
      .secound-div-heading2 {
          color: #b4b00b;
          text-align: center;
          font-family: 'Times New Roman';
      }
      
      .secound-div-inner {
          text-align: center;
          background-color: #333;
          font-size: medium;
          font-weight: 500;
          font-family: 'Times New Roman';
          color: #e9e03b;
          height: 100%;
      }
      
      .secound-div-inner-single {
          background-color: #fff;
          color: #b4b00b;
          padding: 25px;
          margin-bottom: 1rem;
          
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container-fluid"&gt;
       &lt;div class="row"&gt;
          &lt;div id="#About" class="col-md-12"&gt;
          &lt;div class="secound-div"&gt;
          &lt;hr class="line" /&gt;
          &lt;div class="secound-div-heading"&gt;
              &lt;h1&gt;Heading&lt;/h1&gt;
          &lt;/div&gt;
          &lt;hr class="line" /&gt;
          &lt;div id="parent" class="secound-div-inner"&gt;
              &lt;div class="col-md-4"&gt;
                  &lt;div id="child" class="secound-div-inner-single"&gt;
                      &lt;div class="secound-div-heading2 "&gt;
                          &lt;h1&gt;Heading 1&lt;/h1&gt;
                          &lt;hr class="line" /&gt;
                      &lt;/div&gt;
                      &lt;p&gt;
                          Div1
                      &lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-md-4"&gt;
                  &lt;div class="secound-div-inner-single"&gt;
                      &lt;div class="secound-div-heading2"&gt;
                          &lt;h1&gt;Heading 2&lt;/h1&gt;
                          &lt;hr class="line" /&gt;
                      &lt;/div&gt;
                      &lt;p&gt;
                          Div2
                      &lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-md-4"&gt;
                  &lt;div class="secound-div-inner-single"&gt;
                      &lt;div class="secound-div-heading2"&gt;
                          &lt;h1&gt;Heading 3&lt;/h1&gt;
                          &lt;hr class="line" /&gt;
                      &lt;/div&gt;
                      &lt;p&gt;
                          Div3
                      &lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
      &lt;div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And the child div should behaves as row when screen size changed </p>