title: Jquery to set height of nested element to the height of its containing element
body: <p>I think it is a fairly simple problem, but I just cant wrap my head around it and I am not too great with jQuery. I have a div inside of an . The articles height is variable depending on the content (Its a blog post, so some are short, some are long). I want my div to match the height of the article it is nested in.</p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;article class="PostHome"&gt;
      &lt;div class="ColorBarLeft"&gt;&lt;/div&gt;
          &lt;header&gt;
              &lt;h3&gt;@Html.DisplayFor(modelItem =&gt; item.Title)&lt;/h3&gt;
              &lt;small&gt;@Html.DisplayFor(modelItem =&gt; item.DateCreated)&lt;/small&gt;
          &lt;/header&gt;
  
          &lt;section id="PostContent"&gt;
              @Html.DisplayFor(modelItem =&gt; item.Content)
          &lt;/section&gt;
  
          &lt;section id ="PostTags"&gt;
              @Html.Label("Tags:")
              @Html.DisplayFor(modelItem =&gt; item.Tags)
          &lt;/section&gt;
  
          @Html.ActionLink("View Full Post", "Post", new { blogTitle = item.Title.Replace(" ", "-"), id = item.Id}, null)
      &lt;/article&gt;
  </code></pre>
  
  <p>And then I tried some jQuery like so:</p>
  
  <pre><code>$(document).ready(function () {
  $(".ColorBarLeft").height(function () {
      var height = $(this).height()
      $('.PostHome').height(height);
  })
  });
  </code></pre>
  
  <p>I think that code is correct, but it could be off, again, not very good at jQuery.</p>
  
  <p>And I don't know if this is important but there are going to be multiple posthomes and ColorBarlefts on the page at a time.</p>
  
  <p>***EDIT, changes id=PostHome to class=PostHome</p>
  
  <p><img src="https://i.stack.imgur.com/9NwcL.png" alt="enter image description here"></p>
  
  <p>I want the bar where the red squiggly box is.</p>