title: Have div fill in remaining space between left and right elements that DONT have fixed width
body: <p>Ok... so I know there are lots of similar questions out there about how to fill in the remaining space between two divs.  However, none of them will work for me because I need to not count on the elements to the left and the right side always being the same width.  I hope that makes sense.</p>
  
  <p>Here is my html:</p>
  
  <pre><code>&lt;section id="recent-news-posts" class="light-gray-section"&gt;
      &lt;h1&gt;
          &lt;div class="h1-first"&gt;
              Recent
          &lt;/div&gt;
          &lt;div class="h1-second"&gt;
              NewsPosts
          &lt;/div&gt;
      &lt;/h1&gt;
      &lt;div class="line"&gt;&amp;nbsp;&lt;/div&gt;
      &lt;div class="green-button"&gt;Read All News&lt;/div&gt;
      &lt;div class="content"&gt;
          Content
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>And here is the css that I currently have:</p>
  
  <pre><code>.light-gray-section {
      background-color:#e4e0db;
      display:block;
      margin:0px;
  }
  
      .light-gray-section h1 {
          text-shadow: 2px 2px 2px rgba(0,0,0,0.3);
          font-weight: 500;
          padding-left: 30px;
          padding-top: 30px;
          padding-bottom: 15px;
          margin:0px;
          float:left;
      }
  
          .light-gray-section h1 .h1-first {
              color:#142114;
              display:inline;
          }
  
          .light-gray-section h1 .h1-second {
              color:red;
              display:inline;
          }
  
      .light-gray-section .line {
          display:inline-block;
          height: 45px;
          width:100px;
          margin-left: 10px;
          margin-right: 10px;
          border-bottom: 3px solid #9ec096;
      }
  
      .light-gray-section .green-button {
          float:right;
          /* IE10 Consumer Preview */ 
          background-image: -ms-linear-gradient(top, #4C9444 0%, #2D5E27 100%);
          /* Mozilla Firefox */ 
          background-image: -moz-linear-gradient(top, #4C9444 0%, #2D5E27 100%);
          /* Opera */ 
          background-image: -o-linear-gradient(top, #4C9444 0%, #2D5E27 100%);
          /* Webkit (Safari/Chrome 10) */ 
          background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4C9444), color-stop(1, #2D5E27));
          /* Webkit (Chrome 11+) */ 
          background-image: -webkit-linear-gradient(top, #4C9444 0%, #2D5E27 100%);
          /* W3C Markup, IE10 Release Preview */ 
          background-image: linear-gradient(to bottom, #4C9444 0%, #2D5E27 100%);
          border-radius: 5px;
          padding:5px 10px 5px 10px;
          color:white;
          margin-right:30px;
          margin-top:30px;
          float:right;
      }
  
      .light-gray-section .content {
          padding-left: 30px;
          padding-right: 30px;
          padding-bottom: 30px;
          clear:both;
      }
  </code></pre>
  
  <p>I want the line to fill in 100% of the space (minus margins) between the h1 and the button on the right, but the killer is that I need to allow the h1 and the button content to change (in my asp.net application) which may very well change their width, so I cannot hardcode any widths into them.  All solutions I have found for similar layouts involve hard coding the widths into the left and right elements.</p>
  
  <p>I hope this code works out of context, lol.  Right now, of course I have the width of the line in the middle hard coded to 100px just so that it will appear in the right place and I can still see it.  When I try width:100%, it becomes as wide as the containing section and falls to the next line and pushes the button to the line after that.</p>
  
  <p>I hope I do not have to resort to table cells... I assume this might work if I set the middle cell to have a width of 100% (although I haven't tried it).</p>