JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="col-xs-12 col-sm-9 nill">

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

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

<div class="full_graph">

<div class="fg_full_wrap">
  <div class="t_wrap pull-left">
		<div class="iconn"></div>
		$500
	</div>
	
  <div class="t_wrap pull-right">
		<div class="iconn"></div>
		$10,200
	</div>
</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">
        </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>
</div>
<div class="col-xs-12 col-sm-3 nill">Sidebar</div>

CSS

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

.nill { padding: 0; margin: 0; }

.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: 94px;
}

.fg_full_wrap {
  height: 35px;
  border: dashed 1px #000;
  overflow: hidden;
  /* background: pink; */
}

.t_wrap {
  /* float: left; */
  padding: 2px;
  font-size: 12px;
	/* vertical-align: middle; */
  line-height: 25px;
  background: #f3f7fb;
  margin: 0px;
	margin-left: 64px;
}

/* .t_deduct {
  float: left;
  padding: 2px;
  font-size: 12px;
  vertical-align: middle;
  background: #f3f7fb;
  margin: 0px;
  margin-left: 64px;
}

.t_max {
  float: right;
  padding: 4px;
  font-size: 12px;
  vertical-align: center;
  text-align: center;
  background: #f3f7fb;
} */

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

.wrap_bar_deduct {
  float: left;
  width: 99%;
  height: 44px;
  margin: 2px;
  background: #ccc;
}

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

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

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

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

.iconn {
	width: 20px;
	height: 20px;
	background:...