<div class="container col-sm-6 col-md-5" style="border-style: solid; border-width: 1px; padding: 8px; margin: 8px;" >
    <div class="row">
        <div class="col-7">
        </div>
        <div class="col-7" style="text-align: center; font-weight: bold;">
            Time:
        </div>
        <div style="display: block; right: 8px; position: absolute;">
            <input id="battery_auto_refresh" type="checkbox">⟳
        </div>
        
    </div>

    <div class="row">
        <span class="col-7">V:</span>
        <div class="col-5" id="battery_voltage_milli_volt"  style="text-wrap: nowrap"></div>
    </div>
    <div class="row">
        <span class="col-7">mA:</span>
        <div class="col-5" id="battery_current_milli_ampere"  style="text-wrap: nowrap"></div>
    </div>
    <div class="row">
        <span class="col-7">Cycles:</span>
        <div class="col-5" id="battery_cycle_count"  style="text-wrap: nowrap"></div>
    </div>
    <div class="row">
        <span class="col-7">design mA:</span>
        <div class="col-5" id="battery_design_milli_ampere"  style="text-wrap: nowrap"></div>
    </div>
    <div class="row">
        <span class="col-7">remaining mA:</span>
        <div class="col-5" id="battery_remaining_milli_ampere"  style="text-wrap: nowrap"></div>
    </div>
    <div class="row">
        <span class="col-7">charge %:</span>
        <div class="col-5" id="battery_state_of_charge"  style="text-wrap: nowrap"></div>
    </div>
    <div class="row">
        <span class="col-7">health %:</span>
        <div class="col-5" id="battery_state_of_health"  style="text-wrap: nowrap"></div>
    </div>
    <div class="row">
        <span class="col-7">Temp °C:</span>
        <div class="col-5" id="battery_temperature"  style="text-wrap: nowrap"></div>
    </div>
</div>