How to put text before progress bar div?-CodePudding

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 >
             <div  style="width: 30%"></div>
        </div>
    </div>
</div>

CodePudding user response：

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 >
  <p>Ratio</p>
  <div >
    <div  style="width: 30%"></div>
  </div>
</div>