JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<div class="grey">Test</div>

<h2>Test information here.</h2>
<p>Sub information.</p>

<div class="full_graph">

  <div class="t_deduct">$500 deductible</div>
  <div class="t_max">$10,200 Out-of-pocket maximum</div>

  <div class="graph">
    <div class="l_maine">$0</div>
    <div class="l_line"></div>

    <div class="r_maine">
      <div class="t_line"></div>

      <div class="wrap_bar_deduct">
			  <span class="blu">$78</span>
        <div class="bar_deduct">
          <!--<span class="blu">$4,000</span>-->
        </div>
      </div>

      <div class="wrap_bar_deduct_2">
        <div class="bar_deduct_2">
          <span>$14,000</span>
        </div>
      </div>

      <div class="b_plan">*plan year to date</div>
    </div>

  </div>
</div>

CSS

body {
  background: #fff;
  color: #262626;
  font-family: Arial, Helvetica, sans-serif;
}

.grey {
  padding: 10px;
  background: #eee;
}

.full_graph {
  width: 100%;
  max-width: 515px;
  min-width: 300px;
  height: 300px;
  overflow: hidden;
}

.graph {
  width: 100%;
  max-width: 514px;
  height: 116px;
  overflow: hidden;
}

.l_maine {
  float: left;
  min-width: 3%;
  padding-right: 8px;
  margin-top: 52px;
}

.l_line {
  float: left;
  background: #000;
  width: 16px;
  height: 1px;
  margin-top: 63px;
}

.r_maine {
  float: left;
  border-left: solid 1px #000;
  border-right: solid 1px #000;
  width: 80%;
  height: 116px;
}

.t_deduct {
  float: left;
  padding: 4px;
  width: 65px;
  font-size: 12px;
  text-align: center;
  background: #f3f7fb;
  margin: 8px 42px;
}

.t_max {
  float: right;
  padding: 4px;
  width: 100px;
  font-size: 12px;
  text-align: center;
  background: #f3f7fb;
  margin: 8px 64px 8px 8px;
}

.t_line {
  float: left;
  display: block;
  background: #000;
  width: 1px;
  height: 16px;
  margin-left: 34px;
}

.wrap_bar_deduct {
  float: left;
  width: 100%;
  height: 44px;
  margin: 2px 0 2px 0;
  background: #ddd;
}

.bar_deduct {
	position: relative;
  width: 2%;
  height: 44px;
  background: #2767b5;
}

.wrap_bar_deduct_2 {
  float: left;
  width: 100%;
  height: 22px;
  margin: 2px 0 2px 0;
  margin-top: 0;
  background: #ddd;
}

.bar_deduct_2 {
	position: relative;
  width: 90%;
  height: 22px;
  background: #88c267;
}

.bar_deduct span {
  font-size: 14px;
  line-height: 44px;
  position: absolute;
  left: 50%;
	right: 50%;
  /*left: calc(50% - 30%);*/
  /*color: #fff;*/
}

.bar_deduct_2 span {
  font-size: 14px;
  line-height: 22px;
  position: absolute;
  left: 50%;
	right: 50%;
  /*left: calc(89% - 50%);*/
  color: #fff;
}

.b_plan {
  float: left;
  color: #999;
  padding-left: 3px;
  font-size: 10px;
}

.blu {
	position: absolute;
	z-index: 10;
	margin-top: 10px;
	padding: 4px;
	background: #2767b5;
	overflow:...