Cannot get width of Div

<tr>
  <td style = "padding-left: 2%; padding-right: 2%;">
    <span style="padding: 3px; float: left; margin-right:13px;">RISK TAKER</span>
    <div id = "risktakertotal" style= "margin: auto;" class="progress">
      <div id = "risktaker" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="color:black; width:0%; background-color: #0097a7;"></div>
      <div class="vertical-line" id = "risktakerAvg" style=""></div>
    </div>
  </td>
  <td id = "risktakerKB" ><h4></h4></td> 
  <td id = "risktakerS"><h4></h4></td>
</tr>

I have a very simple table with a Bootstrap progress bar in it. I have a vertical line that indicates the average for the bar (not the actual progress). To calculate where to put that line, I want to get the total width of "risktakertotal" and set the lines margin-left to a percentage of that total width.

However, using Javascript, I cannot get the width of that div. I've used .width(), .style.width, .offsetWidth and anything else I could find online to no luck. Does anyone know of I way I can do this? Or another way that I can move this vertical line without the total width?