Horiztonal centered rotated text

Question

Hello I am trying to create this in HTML + CSS.

I have everything working, except the horizontal alignement of the legend is wrong, and the whole legend is offset.

https://jsbin.com/cuzobijuqe/

.barometer-body>div {
  float: left;
  width: 12.5%;
  height: 1.3em;
  display: inline-block;
}

.barometer-body>div:nth-child(1) {
  background-color: #CC0033;
}

.barometer-body>div:nth-child(2) {
  background-color: #FF6633;
}

.barometer-body>div:nth-child(3) {
  background-color: #F49819;
}

.barometer-body>div:nth-child(4) {
  background-color: #FFCC00;
}

.barometer-body>div:nth-child(5) {
  background-color: #FFFF66;
}

.barometer-body>div:nth-child(6) {
  background-color: #99C667;
}

.barometer-body>div:nth-child(7) {
  background-color: #349937;
}

.barometer-body>div:nth-child(8) {
  background-color: #006633;
}

.barometer-legend>div {
  width: 12.5%;
  float: left;
  font-size: 2em;
  line-height: 12.5%;
  display: inline-block;
  transform: rotate(90deg);
  transform-origin: left top 0;
}

<div class="barometer-body">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="barometer-legend">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
</div>

What CSS method should I use for aligning the rotated text to the center position of it's associated segment?

EDIT: thanks to @ovokuro I have an almost perfect solution. I'm happy to use flexbox for this. However when I reduce the viewport, the alignment seems to switch to left rather than right which causes the text to look messy. How would I fix this?

Answer 1

I think you could approach this layout using flexbox

updated as per comment (text not aligning on smaller screen sizes):

Replace text-align: right with justify-content: flex-end:

.barometer-legend > div {
  display: flex;
  justify-content: flex-end;
}

I have also added a media query to reduce the font-size on smaller screens.

.wrapper,
.barometer-body,
.barometer-legend {
  display: flex;
}

.wrapper {
  flex-direction: column;
}

.barometer-body {
  border-radius: 2em;
  overflow: hidden;
}


/* create space between body and legend */

.barometer-legend {
  padding-top: 6%;
}

.barometer-body>div,
.barometer-legend>div {
  flex: 1 0 12.5%;
  width: 12.5%;
  height: 1.3em;
}

.barometer-body>div:nth-child(1) {
  background-color: #CC0033;
}

.barometer-body>div:nth-child(2) {
  background-color: #FF6633;
}

.barometer-body>div:nth-child(3) {
  background-color: #F49819;
}

.barometer-body>div:nth-child(4) {
  background-color: #FFCC00;
}

.barometer-body>div:nth-child(5) {
  background-color: #FFFF66;
}

.barometer-body>div:nth-child(6) {
  background-color: #99C667;
}

.barometer-body>div:nth-child(7) {
  background-color: #349937;
}

.barometer-body>div:nth-child(8) {
  background-color: #006633;
}

.barometer-legend>div {
  font-size: 2em;
  transform: rotate(-90deg);
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 600px) {
  .barometer-legend div {
    font-size: 1.5em
  }
}

<div class="wrapper">
  <div class="barometer-body">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="barometer-legend">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
    <div>Six</div>
    <div>Seven</div>
    <div>Eight</div>
  </div>
</div>