Line break tags are added between inline elements in Wordpress, resulting in broken layout

Question

I am styling some download links which when tested in JSfiddle, appear to be ok. However, when the same code in inserted into WordPress, for some reason the .title class is forced outside the container?

Website: http://79.170.44.103/113events-temp.co.uk/cotswold-113/downloads/

Thanks in advance.

.item-listing .item {
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    display: block;
    height: 60px;
    margin-bottom: 10px;
    padding: 20px 10px 0 110px;
    position: relative;
    text-decoration: none !important;
}
.item-listing .item:hover {
    background: #f0f0f0;
    border-color: #ccc;
}
.item-listing .item .icon {
    position: absolute;
    font-size: 3rem;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border-right: 1px solid #e5e5e5;
    padding: 20px 20px;
    line-height: 40px;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}
.item-listing .item .title {
    color: #222222;
    display: block;
    font-size: 18px;
}
.item-listing .item .subtitle {
    color: #b4b4b4;
    display: block;
    font-size: 14px;
}

<div class="item-listing">
  <a href="#" class="item type-link" target="_blank">
    <span class="icon"><i class="fa fa-download"></i></span>
    <span class="title">Document Title</span>
    <span class="subtitle">File type, pdf for example</span>
  </a>
  <a href="#" class="item type-link" target="_blank">
    <span class="icon"><i class="fa fa-download"></i></span>
    <span class="title">Document Title</span>
    <span class="subtitle">File type, pdf for example</span>
  </a>
  <a href="#" class="item type-link" target="_blank">
    <span class="icon"><i class="fa fa-download"></i></span>
    <span class="title">Document Title</span>
    <span class="subtitle">File type, pdf for example</span>
  </a>
  <a href="#" class="item type-link" target="_blank">
    <span class="icon"><i class="fa fa-download"></i></span>
    <span class="title">Document Title</span>
    <span class="subtitle">File type, pdf for example</span>
  </a>
  <a href="#" class="item type-link" target="_blank">
    <span class="icon"><i class="fa fa-download"></i></span>
    <span class="title">Document Title</span>
    <span class="subtitle">File type, pdf for example</span>
  </a>
</div>

Answer 1

Unfortunately, the WordPress editor can be buggy when you're switching between the "text" and "visual" editors. Since span is an inline element, the only thing I've found to fix the problem (without completely disabling wpautop) is to make the code inline:

<span class="icon"><i class="fa fa-download"></i></span><span class="title">Document Title</span><span class="subtitle">File type, pdf for example</span>

Instead of:

<span class="icon"><i class="fa fa-download"></i></span>
<span class="title">Document Title</span>
<span class="subtitle">File type, pdf for example</span>

Alternatively, you can remove wpautop on that page specifically (without affecting other pages):

add_filter('the_content', 'remove_autop', 9);
function remove_autop($content) {
    if ( is_page(227) ) {
        remove_filter( 'the_content', 'wpautop' );
    }
    return $content;
}

Answer 2

Then just add the following codes in your functions.php

remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );

Answer 3

This is because in wordpress click here there are br (break) tags generating. You have to remove those. I guess you are using this code in wordpress visual editor. Try to avoid visual editor, instead use their text-editor.

Answer 4

Wordpress seems to be automatically adding a bunch of br tags to your output. If you're inputting the menu through the editor, you'll need to make sure you add it as raw HTML. I think WordPress has a filter called wpautop that you'll want to disable if that's the case.