CHARTS TRIBUNE

by Rodwyn Moreno

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row">
    <div class="col">
      Donald J Trump
    </div>
    <div class="col">
      892,702
    </div>
    <div class="col">
      <svg class="chart" width="100%" height="19" role="img">
        <g class="bar">
          <rect width="100%" height="19" class="bar-background"></rect>
          <rect width="56.7%" height="19" class="bar-percent"></rect>
        </g>
      </svg>
    </div>
    <div class="col">56.7%</div>
  </div>
  <div class="row">
    <div class="col">
      Ted Cruz
    </div>
    <div class="col">
      340,201
    </div>
    <div class="col">
      <svg class="chart" width="100%" height="19" role="img">
        <g class="bar">
          <rect width="100%" height="19" class="bar-background"></rect>
          <rect width="21.6%" height="19" class="bar-percent"></rect>
        </g>
      </svg>
    </div>
    <div class="col">21.6%</div>
  </div>  
</div>

CSS

.bar-background {
  fill: #e6e6e6;
}

.bar-percent {
  fill: #006699;
}