JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://demos.jquerymobile.com/1.4.2/js/jquery.mobile-1.4.2.js"></script>
<div style="width: 300px;">
 <div style="float: left; width: 200px;">Left Stuff</div>
 <div style="float: left; width: 100px;">Middle Stuff</div>
 <div style="float: left; width: 200px;">Right Stuff</div>
 <br style="clear: left;" />
 
                 <div style="float:left;height:100px;padding:10px;width:300px;">
                    <!-- <h3 id="direction_street_172634">ROSEVILLE RD</h3>  -->
                    <div style="float:left;width:40%"><img src="./img/straight.png" width="32" height="32"></div>
                    <div style="float:left;width:60%">Turn Left  onto PAUL AVE and go for   0.13 km</div>
                </div>
</div>

CSS

.ui-popup-container
{
    width: 100%;
    height: 100%;
}

JavaScript

$(document).on("pagecreate", function (event, ui) {
    $("#sql").on("popupbeforeposition", popUpSql_OnBeforePosition);
});

function popUpSql_OnBeforePosition(event, ui) {
    var horizSpacing = 5;
    var vertSpacing = 5;
    var horizPaddingBorderSize = $(this).outerWidth() - $(this).width();
    var vertPaddingBorderSize = $(this).outerHeight() - $(this).height();

    $(this).css({
        left: horizSpacing,
        top: vertSpacing,
        width: window.innerWidth - (horizSpacing * 2) - horizPaddingBorderSize,
        height: window.innerHeight - (vertSpacing * 2) - vertPaddingBorderSize
    });
}