title: CSS two span align with border bottom with responsive
body: <p>Here is my code:</p>
  
  <pre><code>&lt;p class="section1comments"&gt;
  &lt;span class="jan"&gt;January 20 2011 by David LaHuta in &lt;a href=""&gt;A Closer Look&lt;/a&gt; &lt;/span&gt;
  &lt;span class="comments"&gt;
  &lt;a href=""&gt;(1) Comments&lt;sup&gt;&lt;img src="slice/comment-icon.jpg" alt="" /&gt;&lt;/sup&gt;&lt;/a&gt;&lt;/span&gt;
  
  &lt;/p&gt;
  </code></pre>
  
  <p><strong>css:</strong></p>
  
  <pre><code>.section1comments, .section2comments {
      font-weight: bold;
      color: #747476;
      border-bottom: 1px solid #D4D4D4;
      padding-bottom: 5px;
      clear: both !important;
  }
  
  .section1comments
  {
      width:100%;
  }
  .jan 
  {
      width:79%;
  }
  .comments 
  {
      width: 18%;
  margin-left:15px;
  }
  </code></pre>
  
  <p>these two span alignment is not working properly when resize the window.</p>
  
  <p>Can anyone help me to fix this issue?</p>
  
  <p>Thanks in advance,</p>