title: How to stop formatting/indentation breaking elements?
body: <p>Ok so this is a strange one and I'm not sure I can really give an effective code example here. But basically, I have some markup and if I add a space or a tab between any<code>div</code> to format it for readability, it will break the html. I haven't saw this before....</p>
  
  <p>So this is what I have, and when you hover over one of the boxes, it will slide up to reveal some text behind it like so. </p>
  
  <p><a href="https://i.stack.imgur.com/cnBjs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cnBjs.png" alt="four elements"></a></p>
  
  <p><a href="https://i.stack.imgur.com/0idlu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0idlu.png" alt="slide up"></a></p>
  
  <p>The problem is that there isn't much spacing and/or indentation in the markup.</p>
  
  <pre><code>  &lt;div class="small-3 spb_icon_box columns"&gt;
      &lt;div class="spb-asset-content"&gt;
      &lt;div class="sf-icon-box sf-icon-box-animated-alt animated-no-rounded"&gt;
      &lt;div class="height-adjust"&gt;&lt;/div&gt;
      &lt;div class="inner"&gt;
      &lt;div class="front" style="background-color:#263238;"&gt;&lt;div class="back-title" data-title="Lorem Ipsum" style="color:#ffffff;"&gt;&lt;/div&gt;&lt;div class="front-inner-wrap"&gt;&lt;div id="sf-svg-28" class="sf-svg-icon-holder sf-svg-icon-animate business-outline_bulb-63 has-color" data-svg-src="http://xxxx.com/wp-content/themes/XXX/images/svgs/XXXX.svg" data-anim-type="delayed" data-path-timing="ease-in" data-anim-timing="ease-out" style="stroke: rgb(255, 255, 255); opacity: 1;"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 48 48"&gt;&lt;g transform="translate(0, 0)"&gt;
      &lt;path data-color="color-2" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke-linejoin="round" d="M2,24L6,24" style="stroke-dasharray: 4, 6; stroke-dashoffset: 0;"&gt;&lt;/path&gt;
      &lt;path data-color="color-2" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke-linejoin="round" d="M8.4,8.4L11.3,11.3" style="stroke-dasharray: 5, 7; stroke-dashoffset: 0;"&gt;&lt;/path&gt;
      &lt;path data-color="color-2" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke-linejoin="round" d="M24,2L24,6" style="stroke-dasharray: 4, 6; stroke-dashoffset: 0;"&gt;&lt;/path&gt;
      &lt;path data-color="color-2" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke-linejoin="round" d="M39.6,8.4L36.7,11.3" style="stroke-dasharray: 5, 7; stroke-dashoffset: 0;"&gt;&lt;/path&gt;
      &lt;path data-color="color-2" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke-linejoin="round" d="M46,24L42,24" style="stroke-dasharray: 4, 6; stroke-dashoffset: 0;"&gt;&lt;/path&gt;
      &lt;path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M36,24c0-6.6-5.4-12-12-12  s-12,5.4-12,12c0,5.2,3.3,9.7,8,11.3V40h8v-4.7C32.7,33.7,36,29.2,36,24z" stroke-linejoin="round" style="stroke-dasharray: 85, 87; stroke-dashoffset: 0;"&gt;&lt;/path&gt;
      &lt;path data-color="color-2" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke-linejoin="round" d="M20,46L28,46" style="stroke-dasharray: 8, 10; stroke-dashoffset: 0;"&gt;&lt;/path&gt;
      &lt;/g&gt;&lt;/svg&gt;&lt;/div&gt;&lt;div class="sf-icon-box-content-wrap clearfix"&gt;&lt;h3 style="color:#ffffff;"&gt;Lorem Ipsum&lt;/h3&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="back" style="background-color:#151d21;"&gt;&lt;div class="back-inner-wrap"&gt;&lt;div class="sf-icon-box-content" style="color:#ffffff;"&gt;
      &lt;p&gt;Vestibule convallis pulvinar tellus eget ultricies. Sed sollicitudin, sem vitae elementum euismod, veilt arcu mattis diam, in scelerisque purus.&lt;/p&gt;
      &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>If I try to add any spacing using the spacebar, return or tab key, the elements breaks. Instead of the title and icon being placed in the center as I'd expect, for what ever reason, it drops below.</p>
  
  <p>Any ideas as to what could be causing this?</p>
  
  <p>UPDATE: <a href="https://jsfiddle.net/z43xogs0/1/" rel="nofollow noreferrer">fiddle</a></p>
  
  <pre><code>&lt;div class="front" style="background-color:#263238;"&gt;SPACE/TAB HERE&lt;div class="back-title" data-title="Lorem Ipsum" style="color:#ffffff;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>If you go on the fiddle, and add the space or a tab where I've added a comment on the above markup, you will see that it will break the code.</p>
  
  <p><a href="https://i.stack.imgur.com/UWpFs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UWpFs.png" alt="enter image description here"></a></p>