Issues in progress bar - html

Question

I am working on an angular app and making a progress bar using angular. I am facing two problems with my progress bar.
The 4th section of web development is titled from end. I want to make it straight same as first section
Text inside boxes coming in one after the other lines. I want them in one single line in parallel.
How can I resolve these issues?
.wrap {
width: 100%;
height: 30px;
z-index: -2;
white-space: nowrap;
overflow: hidden;
}
.wrap div:first-child {
margin-left: -2%;
}
.progress {
margin: 0;
margin-left: 0.5%;
height: 30px;
width: 25%;
position: relative;
display: inline-block;
text-align: center;
line-height: 30px;
transition: all 0.8s;
}
.progress:before,
.progress:after {
content: "";
position: absolute;
transition: all 0.8s;
z-index: -1;
}
.progress:before {
height: 50%;
width: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.2);
-webkit-transform: skew(45deg);
-moz-transform: skew(45deg);
transform: skew(45deg);
}
.progress:after {
height: 50%;
width: 100%;
top: 50%;
left: 0;
background: rgba(0, 0, 0, 0.2);
-webkit-transform: skew(-45deg);
-moz-transform: skew(-45deg);
transform: skew(-45deg);
}
.progress:hover:before,
.progress:hover:after {
background: tomato;
}
<div class="wrap">
<div class="progress">
<div>MyData</div>
<div>My Status</div>
</div>
<div class="progress">
<div>MyData</div>
<div>My Status</div>
</div>
<div class="progress">
<div>MyData</div>
<div>My Status</div>
</div>
<div class="progress">
<div>MyData</div>
<div>My Status</div>
</div>
</div>

Answer 1

Since you've put each label in a div element you might use flex layout on the parent. Otherwise, simply put both labels in the same div. Here I demonstrate both approaches.
.wrap {
width: 100%;
height: 30px;
z-index: -2;
white-space: nowrap;
overflow: hidden;
}
.wrap div:first-child {
margin-left: -2%;
}
.progress {
margin: 0;
margin-left: 0.5%;
height: 30px;
width: 25%;
position: relative;
display: inline-flex; /* updated */
justify-content: center; /* new */
gap: 8px; /* new */
text-align: center;
line-height: 30px;
transition: all 0.8s;
}
.progress:before,
.progress:after {
content: "";
position: absolute;
transition: all 0.8s;
z-index: -1;
}
.progress:before {
height: 50%;
width: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.2);
transform: skew(45deg);
}
.progress:after {
height: 50%;
width: 100%;
top: 50%;
left: 0;
background: rgba(0, 0, 0, 0.2);
-webkit-transform: skew(-45deg);
-moz-transform: skew(-45deg);
transform: skew(-45deg);
}
.progress:hover:before,
.progress:hover:after {
background: tomato;
}
<div class="wrap">
<div class="progress">
<div>MyData</div>
<div>My Status</div>
</div>
<div class="progress">
<div>MyData</div>
<div>My Status</div>
</div>
<div class="progress">
<div>MyData My Status</div>
</div>
<div class="progress">
<div>MyData My Status</div>
</div>
</div>