How to put text before progress bar div?

Issue

I want to put the progress bar on the same line as the text.

I tried with display: flex; on the global div, but it didn't change anything.

.ratio-background {
    background-color: red;
}
.ratio-main {
    height: 12px;
    background-color: green;
}

<div>
    <p>
        Ratio
    </p>
    <div>
        <div class="ratio-background">
             <div class="ratio-main" style="width: 30%"></div>
        </div>
    </div>
</div>

Solution

You want to set display: flex; on the parent. In this case, I called it .wrapper. Because the .ratio-background doesn't have content, you need to define a width for it to display.

.ratio-background {
  background-color: red;
  width: 90%;
}

.ratio-main {
  height: 12px;
  background-color: green;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

<div class="wrapper">
  <p>Ratio</p>
  <div class="ratio-background">
    <div class="ratio-main" style="width: 30%"></div>
  </div>
</div>

Answered By - Kameron