title: Remove annoing element (<div>) resizing when showing <input>
body: <p>As you can see in <a href="http://jsfiddle.net/jW2re/9/" rel="nofollow">this</a> JSFiddle, when you change the radio button the button's div and the bottom div move themself.
  This is due to the font of the radios and the date input, because with "normal" font doesn't happen, but it is also very annoing. How can I solve the problem?</p>
  
  <p>HTML here, CSS and JS in JSFiddle</p>
  
  <pre><code>&lt;div id="cont" class="write"&gt;      
      &lt;div&gt;
          &lt;div&gt;TEXT&lt;/div&gt;
          &lt;div&gt;some text some text some text some text some text &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div&gt;
           &lt;input type="radio"
                  name="att"
                  id="on"
                  value="on"
                  onclick="showFrom(this)"
           /&gt;
           &lt;label for="on"&gt;On&lt;/label&gt;
  
           &lt;input type="radio"
                  name="att"
                  id="on_f"
                  value="on_f"
                  onclick="showFrom(this)"
                  checked="checked"
           /&gt;
           &lt;label for="on_f"&gt;From:&lt;/label&gt;
  
           &lt;input type="date"
                  id="on_f_d"
                  name="on_f_d"
                  disabled="disabled"
                  placeholder="dd.mm.yyyy"
          /&gt;
      &lt;/div&gt;
  
      &lt;div&gt;
          &lt;div&gt;TEXT&lt;/div&gt;
          &lt;div&gt;some text some text some text some text some text &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>