Test.html

<style>
.property-list {
    display: block;
    margin: 0;
    list-style: none;
    padding: 0;
}
 
body {
    color: #333;
    font-family: Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857142857143;
}
 

.property-list.two-cols>.item {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    clear: left;
    float: left;
    width: 50%;
}

.property-list.two-cols>.item-right {
    clear: right;
    float: right;
}

li {
    display: list-item;
    text-align: -webkit-match-parent;
}

.property-list>li {
    margin: 1px 0 0 0;
    padding: 0;
    position: relative;
}

.property-list .item {
    margin: 1px 0 0 0;
}

.property-list .wrap {
    padding: 0 10px 0 150px;
}


.property-list .item .name {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
    word-break: break-word;
    color: #707070;
    display: inline-block;
    font-weight: bold;
    padding: 2px 5px 2px 0;
    padding-right: 5px;
    text-align: right;
    width: 150px;
}

.property-list .wrap .name {
    float: left;
    margin-left: -150px;
}

.property-list .item .name,   .item-details dl>dt {
    text-align: left;
}
 
</style>


<div class="mod-content">

<ul id="issuedetails" class="property-list two-cols">
    <li class="item">
        <div class="wrap">
            <strong class="name">Type:</strong>
            <span id="type-val" class="value">
                                <img alt="" height="16" src="/secure/viewavatar?size=xsmall&amp;avatarId=12723&amp;avatarType=issuetype" title="Defect - A problem which impairs or prevents the functions of the product." width="16"> Defect
            </span>
        </div>
    </li>
    <li class="item item-right">
        <div class="wrap">
            <strong class="name">Status:</strong>
            <span id="status-val" class="value">
                                <span class=" jira-issue-status-lozenge aui-lozenge jira-issue-status-lozenge-yellow jira-issue-status-lozenge-indeterminate jira-issue-status-lozenge-max-width-medium" data-tooltip="<span class=&quot;jira-issue-status-tooltip-title&quot;>R&amp;amp;D In Progress</span><br><span class=&quot;jira-issue-status-tooltip-desc&quot;>R&amp;amp;D is currently working on the ticket.</span>">R&amp;D In Progress</span>            </span>
                    </div>
    </li>
            <li class="item">
            <div class="wrap">
                <strong class="name">Priority:</strong>
                <span id="priority-val" class="value editable-field inactive" title="Click to edit">
                                        <img alt="" height="16" src="/images/icons/priorities/critical.png" title="2 - Critical - Crashes, loss of data, severe memory leak." width="16"> 2 - Critical
                <span class="overlay-icon aui-icon aui-icon-small aui-iconfont-edit"></span></span>
            </div>
        </li>
                                <li class="item item-right">
            <div class="wrap">
                <strong class="name">Resolution:</strong>
                <span id="resolution-val" class="value unresolved">
                                    Unresolved
                                </span>
            </div>
        </li>
                <li class="item">
            <div class="wrap">
                <strong class="name">Affects Version/s:</strong>
                <span id="versions-val" class="value editable-field inactive" title="Click to edit">
                                            <span class="shorten" id="versions-field" style="height: auto;">
                                                            <span title="Oak (7.3/10.3) SM7.3/FW10.3 in support to MPO fan-out">Oak (7.3/10.3)</span>                                                    </span>
                                    <span class="overlay-icon aui-icon aui-icon-small aui-iconfont-edit"></span></span>
            </div>
        </li>
                <li class="item item-right">
            <div class="wrap">
                <strong class="name">Fix Version/s:</strong>
                <span id="fixfor-val" class="value editable-field inactive" title="Click to edit">
                                            <span class="shorten" id="fixVersions-field" style="height: auto;">
                                                            <a href="/browse/SM/fixforversion/15064" title="Oak (7.3/10.3) SM7.3/FW10.3 in support to MPO fan-out">Oak (7.3/10.3)</a>                                                    </span>
                                    <span class="overlay-icon aui-icon aui-icon-small aui-iconfont-edit"></span></span>
            </div>
        </li>
                <li class="item">
            <div class="wrap">
                <strong class="name">Component/s:</strong>
                <span id="components-val" class="value editable-field inactive" title="Click to edit">
                                            None
                                    <span class="overlay-icon aui-icon aui-icon-small aui-iconfont-edit"></span></span>
            </div>
        </li>
                    <li class="item full-width">
            <div class="wrap" id="wrap-labels">
                <strong class="name">Labels:</strong>
                    <div class="labels-wrap value editable-field inactive" title="Click to edit">
            <span class="labels" id="labels-103280-value">None</span>
                                <a class="aui-icon aui-icon-small aui-iconfont-edit edit-labels" id="edit-labels-103280-labels" href="/secure/EditLabels!default.jspa?id=103280&amp;noLink=false" title="Follow link"><span>Labels</span></a>
                <span class="overlay-icon aui-icon aui-icon-small aui-iconfont-edit"></span></div>
            </div>
        </li>
        </ul>

</div>