Why text before div section will appears AFTER it?-CodePudding

I try to modify single.php in WordPress theme, by adding social buttons before & after the post contents, as below:

          <div class="socialsharebuttons">
            <strong>SHARE NOW:</strong><?php echo do_shortcode('[DISPLAY_ULTIMATE_SOCIAL_ICONS]'); ?>  
          </div>
          <div class="entry">           
            <?php the_content(''); ?>
          </div>
          <div class="socialsharebuttons">
            <strong>SHARE NOW:</strong><?php echo do_shortcode('[DISPLAY_ULTIMATE_SOCIAL_ICONS]'); ?>  
          </div>

In the code, the "SHARE NOW" text appears right before the PHP code that generate the shortcode. However, after displaying the post such as

I then use Chrome DevTools to diagnose the issue, and find the codes are:

<div class="socialsharebuttons">
            <strong>SHARE NOW:</strong><div class="sfsi_widget sfsi_shortcode_container">...</div>  
          </div>

The "SHARE NOW" is also before the <div class="sfsi_widget sfsi_shortcode_container">.

I then check the CSS for , and find it has property float: left. So I follow the instructions in

If you want the list to go after the text use

div.socialsharebuttons strong{
        display: block;
        margin-bottom: 13px;
    }