Putting text before and after css horizontal bar charts

user_13002437 0
Viewed 137

Here is what I'm trying to do. I have CSS horizontal bar charts. The problem is that I'm trying to get some text before and after. Please see the current screenshot enter image description here

.forecasting {
  box-sizing: border-box;
  width: 100%;
  margin: 20px 0;
}

.forecasting p {
  padding: 0;
  letter-spacing: 1px;
  margin: 0 0 15px;
  color: #000;
  font-weight: bold;
}

.forecasting p:nth-child(2) {
  float: right;
  position: relative;
  top: -25px;
}

.forecast-bar {
  box-sizing: border-box;
  background: #fff;
  border: #0000CD 1px;
  border-style: solid;
}

.forecast-todate {
  width: 100%;
  height: 15px;
  background: #0000CD;
}
<div class="forecasting">
  <p>Name of person $30,777,854.19</p>
  <p>$30,777,854.19</p>

  <div class="forecast-bar">
    <div class="forecast-todate" style="width: 90%;"></div>
  </div>
</div>

How would I be able to get the Text first, bar chart in the middle, and text at the end.

flexbox css html
1 Answers

Is that what you are looking for? Basically I've added flexbox to your main div to put children elements in a row and I gave align-items: center to center them horizontally

 .forecasting {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
 }

.forecasting p {
   padding: 0;
   letter-spacing: 1px;
   color: #000;
   font-weight: bold;
}

.forecast-bar {
    box-sizing: border-box;
    background: #fff;
    border: #0000CD 1px;
    border-style: solid;
    width: 80%;
    padding-right:20px;
    margin-right:10px;
}

.forecast-todate {
   width: 100%;
   height: 15px;
   background: #0000CD;
 }
 <div class="forecasting">
      <p>Name of person </p>

      <div class="forecast-bar" >
         <div class="forecast-todate" ></div>
      </div>
      <p>$30,777,854.19</p>
  </div>

user_135448490
Related