.dv-capsule-chart { position: relative; display: flex; flex-direction: row; box-sizing: border-box; padding: 10px; color: #fff; } .dv-capsule-chart .label-column { display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; padding-right: 10px; text-align: right; font-size: 12px; } .dv-capsule-chart .label-column div { height: 20px; line-height: 20px; } .dv-capsule-chart .capsule-container { flex: 1; display: flex; flex-direction: column; justify-content: space-between; } .dv-capsule-chart .capsule-item { box-shadow: 0 0 3px #999; height: 10px; margin: 5px 0px; border-radius: 5px; } .dv-capsule-chart .capsule-item div { height: 8px; margin-top: 1px; border-radius: 5px; transition: all 0.3s; } .dv-capsule-chart .capsule-item div .capsule-item-val { position: absolute; top: -5px; font-size: 12px; } .dv-capsule-chart .unit-label { height: 20px; font-size: 12px; position: relative; } .dv-capsule-chart .unit-label:not(:first-child) { text-align: right; } .dv-capsule-chart .unit-label div { position: absolute; } .dv-capsule-chart .unit-text { text-align: right; display: flex; align-items: flex-end; font-size: 12px; line-height: 20px; margin-left: 10px; }