title: CSS display multiple span/textboxes inline
body: <p>I have the following code:</p>
  
  <pre><code>    &lt;div class="filter-field"&gt;
          &lt;span class="filter-title"&gt;Number From&lt;/span&gt;
          &lt;span class="filter-control"&gt;
              &lt;dx:ASPxTextBox ID="FilterNumberFrom" runat="server" /&gt;
          &lt;/span&gt;
          &lt;span class="filter-extension"&gt;To&lt;/span&gt;
          &lt;span class="filter-control"&gt;
              &lt;dx:ASPxTextBox ID="FilterNumberTo" runat="server" /&gt;
          &lt;/span&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>and this stylesheet:</p>
  
  <pre><code>    .filter-field {
          height: 20px;
          display: inline;
      }
  
      .filter-title {
          width:90px;
          display: inline;
          padding-right:10px;
      }
  
      .filter-extension {
          width: 40px;
          display: inline;
          padding-left: 10px;
          padding-right: 10px;
      }
  
      .filter-control {
          display: inline;
      }
  </code></pre>
  
  <p>but each span is displayed on a new line like this:</p>
  
  <blockquote>
    <p>Number From</p>
    
    <p>TextBox</p>
    
    <p>To</p>
    
    <p>TextBox</p>
  </blockquote>
  
  <p>when it's supposed to be something like</p>
  
  <blockquote>
    <p>Number From <strong>[space]</strong> TextBox <strong>[more
    spaces]</strong> To <strong>[space]</strong> TextBox</p>
  </blockquote>
  
  <p>How can I achieve this through css without changing the tags I'm using? (actually read: without using tables.)</p>