I am looking to place two progress bars next to each other, but I have tried using float: left and inline-block without success.
I am open to a solution using flex, but I believe there must be a simple fix for this issue.
Here is a link to the fiddle for reference: https://jsfiddle.net/8j606f85/
HTML:
<div class="row">
<div class="full bar">
<div class="progress bar">
<div class="text">
Text
</div>
</div>
</div>
<div class="full bar">
<div class="progress bar">
<div class="text">
Text
</div>
</div>
</div>
</div>
CSS:
.row {
//????????
}
.full.bar {
position: relative;
display: block;
max-width: 50%;
border: none;
margin: 0.5em 0em 0.5em;
box-shadow: none;
background: rgba(0, 0, 0, 0.1);
padding: 0em;
border-radius: 0.25rem;
}
.progress.bar {
display: block;
line-height: 1;
position: relative;
width: 50%;
min-width: 2em;
background: #888888;
border-radius: 0.25rem;
z-index: 200;
height: 1.25em;
}
.text {
white-space: nowrap;
position: absolute;
width: auto;
font-size: 0.9375em;
top: 50%;
right: 0.5em;
left: auto;
bottom: auto;
color: rgba(255, 255, 255, 0.7);
text-shadow: none;
margin-top: -0.5em;
font-weight: bold;
text-align: left;
}