title: Prevent row jumping when message displayed?
body: <p>I have few elements on the screen where user can search for records. After they enter the text and click on the button they should see a message next to the search button. My code works fine but my message jumps and that affects entire row. All elements move down once message shows and when message disappears everything goes back as usual. I'm wondering how I can prevent elements to jump when message show on the scree? I use div elements but they are displayed as table rows and cells. I use this because this code is inside of the form and using table in this case is not valid HTML format/structure. Here is example of my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#searchBtn').on('click', function(){
   $('#searchMsg').addClass("error").show().text('This field is required.').delay(4000).fadeOut('slow').queue(function(){
         $(this).removeClass("error").dequeue();
     });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div.formTbl {
   display: table;
   width: 100%;
  }
  div.frRow {
   display: table-row;
   text-align: left;
  }
  div.frCell {
   display: table-cell;
   padding-top: 2px;
   padding-bottom: 2px;
   padding-left: 0px;
   padding-right: 0px;
   text-align: center;
  }
  span.info, .success, .warning, .error {
   border: 1px solid;
   margin: 5px;
   padding:5px 10px 5px 40px;
   background-repeat: no-repeat;
   background-position: 10px center;
   border-radius: 3px;
   display: block;
  }
  span.error {
   color: #D8000C;
   background-color: #FFBABA;
   background-image: url('../Images/error.png');
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="formTbl" style="width:650px;"&gt;
    &lt;div class="frRow"&gt;
      &lt;div class="frCell" style="width:85px;"&gt;
        &lt;select name="studMenu" id="studMenu"&gt;
          &lt;option value="1"&gt;Name&lt;/option&gt;
          &lt;option value="3"&gt;DOB&lt;/option&gt;
          &lt;option value="4"&gt;Gender&lt;/option&gt;
          &lt;option value="5"&gt;Nationality&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
      &lt;div class="frCell" style="width:175px;"&gt;
        &lt;input type="text" name="searchFld" id="searchFld" size="24" maxlength="24" value="" title="Maximum size of the field is 24 characters." placeholder="Example: John, Miller" /&gt;
      &lt;/div&gt;
      &lt;div class="frCell" style="width:80px;"&gt;
        &lt;input type="button" name="searchBtn" id="searchBtn" value="Search"/&gt;
      &lt;/div&gt;
      &lt;div class="frCell"&gt;
        &lt;span id="searchMsg" style="display:none;"&gt;&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Working example: <a href="https://jsfiddle.net/dmilos89/xeLj00kg/" rel="nofollow noreferrer">https://jsfiddle.net/dmilos89/xeLj00kg/</a></p>