JSFiddle - React, Tailwind, and code Playground

HTML

<div class='spacerdiv50'></div>

<div class="col-xs-3" id="increased-width">
            <div id="standards">
                <label><strong>My Energy Standards</strong></label>
                <a class="btn" data-toggle="modal" data-target="#energyStandardModal"><span class="glyphicon glyphicon-info-sign"></span></a>
                <br />
            </div>
            <div id="years">
                <h5><strong>My Study Periods (in years)</strong></h5>
                <div id="col-1" class="altStudyPeriod"></div>
                <div id="col-2" class="altStudyPeriod"></div>
                <div id="col-3" class="altStudyPeriod"></div>
                <div id="col-4" class="altStudyPeriod"></div>
            </div>
        </div>

<div class='putmehere'></div>
<div class='putmehere2'></div>

CSS

.spacerdiv10 {
    height: 10px;
}
.spacerdiv50 {
    height: 50px;
}
.col-xs-3 {
    position: relative;
    border: 1px solid black;
}
#standards {
    border: 1px solid red;
}

JavaScript

$('.putmehere').html( "#standards position.top using .position(): " + $("#standards").position().top );
$('.putmehere2').html( "#standards position.top using .offset(): " + $("#standards").offset().top );