title: Float a span over a textarea?
body: <p>html:</p>
  
  <pre><code>&lt;div class="no-contact-info"&gt;
      &lt;textarea&gt;&lt;/textarea&gt;
      &lt;span&gt;no contact info&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.no-contact-info {
      width: 400px;
  }
  
  .no-contact-info textarea {
      width: 100%;
      border-width: 1px;
      border-style: solid;
  
      border-right-color: #dbdfe6;
      border-bottom-color: #e3e9ef;
      border-left-color: #e7e8ed;
      border-top-color: #abadb3;    
  
      z-index: 2;
  }
  
  .no-contact-info span {
      display: block;
      background:#FFFFC6 url(/media/icons/error.png) no-repeat 4px center;
  
      padding: 2px 0 1px 24px;
  
      color: #333333;
      font-size: 12px;
      font-weight: bold;
  
      border: 1px solid #abadb3;
      border-top-color: red;
      width: 200px;
      margin-top: -3px;
      z-index: 1;
  
  
      -webkit-border-bottom-right-radius: 4px;
      -webkit-border-bottom-left-radius: 4px;
      -moz-border-radius-bottomright: 4px;
      -moz-border-radius-bottomleft: 4px;
      border-bottom-right-radius: 4px;
  }
  </code></pre>
  
  <p>view: <a href="http://jsfiddle.net/XurSz/" rel="nofollow noreferrer">http://jsfiddle.net/XurSz/</a></p>
  
  <p>I want to push the "no contact info" span up slightly so that it covers the bottom border of the textarea... but the textarea keeps wanting to go overtop. How can I get around this?</p>