title: How can I create a line after my text to the width of the container?
body: <p>Yes, I'm a newb so please go easy.  I know there's got to be several ways to accomplish this.  Basically I've been trying to come up with a consistent way to have a header with a line after the text that will run to the full width of a container element.</p>
  
  <p>Something like this:</p>
  
  <pre><code>This is my header _______________________________________________________ |&lt;- end container
  This is another header __________________________________________________ |&lt;- end container
  </code></pre>
  
  <p>I'm trying to create a .line class that will use bottom-border to create the line but I've been unsuccessful at creating a variable length line that will extend the full width of the container.</p>
  
  <p>Here's what I've tried:</p>
  
  <p>CSS:</p>
  
  <pre><code>.line
  {
      display:inline-block;
      border-bottom:2px #5B3400 solid;
      margin-left:5px;
      width:80%;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;h2&gt;Our Mission&lt;span class="line"&gt;&lt;/span&gt;&lt;/h2&gt;
  </code></pre>
  
  <p>Of course this only gives me a line 80% of the container from the left border including the width of the text.  How can I create a line that begins after the text and runs the full width of the border regardless of how much text is on the same line?</p>
  
  <p>I know this should be easy but I haven't been able to find a solution yet.</p>
  
  <p>Thanks!</p>