dokgu on "Download-Monitor auto inserts code"

I've installed the latest download-monitor plugin and I wanted to modify the way it displays the download link.

So what I did was to put this in the editor:

<span class="file-details">
    <h5>File Details</h5>
    <ul id="fileDetails">
        <li>
            <span class="fileType">File Type</span>
            <strong><?php print(strtoupper($dlm_download->get_the_filetype())); ?></strong>
        </li>
        <li>
            <span class="fileDownloads">Downloads</span>
            <strong><?php printf( _n( '1', '%d', $dlm_download->get_the_download_count(), 'download_monitor' ), $dlm_download->get_the_download_count() ) ?></strong>
        </li>
        <li>
            <span class="fileSize">File Size</span>
            <strong><?php print($dlm_download->get_the_filesize()); ?></strong>
        </li>
    </ul>
    <a class="download-link" title="<?php if ( $dlm_download->has_version_number() ) printf( __( 'Version %s', 'download_monitor' ), $dlm_download->get_the_version_number() ); ?>" href="<?php $dlm_download->the_download_link(); ?>" rel="nofollow">
        <strong>Download</strong>
    </a>
</span>

But when I look at the rendered page, the source says that the <span class="file-details"> is contained in a p tag and it only contains a br tag.

My intended content for the span is now located outside of the span. Please help me with this, I'm very new to WordPress modifications but I can code.

Basically, the structure that I wanted to have is like this: http://imageshack.us/a/img812/3978/1c7x.png

But the structure that is rendered is like this: http://imageshack.us/a/img541/7277/d2a.png

You can view my problem at: http://dokgu.com/social-mediacons/