title: How best to space between a text field of fixed height and a subsequent input field
body: <p>i'm trying to put a text field of fixed height 100px and then a subsequent input field into a page, all floated left.  If i were to have two text fields placed in the page one after the other, and I wanted to provide spacing between the two fields, I would traditionally use a <br> tag to provide a line space between two elements.</p>
  
  <pre><code>&lt;input type="text" class="formInput" name="item1" placeholder="item 
      &lt;br&gt;    
      &lt;input type="text" class="formInput" name="item2" placeholder="item2"&gt;
  </code></pre>
  
  <p>When I try to do the same thing after my text field, no spacing is made until I hit about the 4th or 5th <br> tag. </p>
  
  <pre><code>    &lt;textarea class="formInput" name="item3" placeholder="item3" style="height: 100px"&gt;
  &lt;/textarea&gt;     
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;        
          &lt;input type="text" class="formInput" name="item4" placeholder="item4" style="clear: both; float:left;"&gt;
  </code></pre>
  
  <p>I'm assuming that is because the <br> tag indexes the line break size from the start of the last element in the page and not the end height of where it is displayed on the page.  To that effect, can anyone suggest an appropriate way to structure my html or subsequent styling so i don't have to use 5 <br> tags to space out the text and input fields appropriately?  Perhaps there is a more effective HTML element or trick in css?  </p>
  
  <p>EDIT:  here is the css associated with these elements of class</p>
  
  <pre><code>.formInput{
  float: left;
  border: 1px solid #999999;
  border-radius: 3px;
  width: 200px;
  height: 20px;
  font-size: 1.2em;
  </code></pre>
  
  <p>}</p>
  
  <p>it was made apparent that this is necessary to answer the question more fully.</p>