Issue with Progress Indicator alignment in sap.ui.layout.form.(Simple)Form - sapui5

Question

The ProgressIndicator should be aligned vertically in a same row.
Current output:
<form:SimpleForm id="idSimpleForm"
editable="false"
layout="ResponsiveGridLayout"
maxContainerCols="2"
columnsM="2"
singleContainerFullSize="false"
labelSpanS="5"
>
<Label text="Lines Of Code"/>
<Text text="{...}"/>
<Label text="CSS"/>
<ProgressIndicator percentValue="100" state="Success"/>
<Text text="{...}"/>
<Label text="XML"/>
<ProgressIndicator percentValue="30" state="Success"/>
<Text text="{...}"/>
<Label text="JavaScript"/>
<ProgressIndicator percentValue="20" state="Success"/>
<Text text="{...}"/>
</form:SimpleForm>
Desired output:

Answer 1

Simply set displayOnly to true.
<form:SimpleForm layout="ResponsiveGridLayout">
<Label text="CSS"/>
<ProgressIndicator displayOnly="true" displayValue="14k" percentValue="100" state="Information" />
<Label text="XML"/>
<ProgressIndicator displayOnly="true" displayValue="7.3k" percentValue="30" state="Information" />
<Label text="JavaScript"/>
<ProgressIndicator displayOnly="true" displayValue="2.1k" percentValue="20" state="Information" />
</form:SimpleForm>
From: https://jsbin.com/huvokeg/edit?js,output
Avoid custom CSS.

Answer 2

you can add a class to the progress indicator control and redefine the style accordingly. e.g. class name is progress-indicator.
.progress-indicator {
margin: 0px !important;
height: 1.25rem;
border-radius: 1px !important;
}
.progress-indicator .sapMPIBarPositive {
background-color: #91C8F6;
}
.progress-indicator .sapMPIBar {
border-radius: 1px !important;
}
.progress-indicator .sapMPIBarRemaining {
border-top-right-radius: 0rem;
border-bottom-right-radius: 0rem;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
}
demo: https://jsbin.com/meviqeb/edit?html,css,output