Empty elements in XSL - Nesting Problems

I have a portion of my xsl that looks like this

     <div class="social-share">
        <div class="twitter-icon" data-url="{link}" data-text="{title}"></div>
        <div class="facebook-icon" data-url="{link}" data-text="{title}"></div>
        <div class="linkedin-icon" data-url="{link}" data-text="{title}"></div>
     </div>

The javascript at the beginning of the file pulls in APIs related to these social media links, so they are intentionally empty. However, leaving these empty will result in the following structure.

     <div class="social-share">
        <div class="twitter-icon" data-url="{link}" data-text="{title}">
        <div class="facebook-icon" data-url="{link}" data-text="{title}">
        <div class="linkedin-icon" data-url="{link}" data-text="{title}">
        </div>
        </div>
        </div>
     </div>