<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
ul {
list-style-type: none;
margin: 0;
padding: 0
}
li{
height: 64px;
background-color:pink;
}
.a{
height: 64px;
}
.ab{
display: flex;
direction: row;
align-items: center;
}
}
.b{
display: flex;
direction: row-reverse;
align-items: center;
}
.secondli{
margin-top: 20px;
}
</style>
<title>Document</title>
</head>
<body>
<div class="container" >
<div class="row">
<div class="col-md-6 col-6" >
<p>mwiiwiw</p>
<ul>
<li>
<div style="width: 100%">
<span>Xyz</span>
<span>sjfoeij</span>
</div>
<div class="row a">
<div class="col-12 col-md-8 ab" style="background-color: aqua;">
<span class="b">ABC</span>
</div>
<div class="col-12 col-md-4 b"style="background-color: yellow;" >
<span>11</span>
</div>
</div>
</li>
<li class="secondli">
<div class="row a">
<div class="col-12 col-md-8 ab" >
<span class="b">ABC</span>
</div>
<div class="col-12 col-md-4 b" >
<span>11</span>
</div>
</div>
</li>
</ul>
</body>
</html>How can I display all the values at the center of the row?And the div with spans value Xyz is not taking width same as row below it.And also the second row is not taking width same as row above? How can I achieve that using bootstrap and Css. Can we add two li and a row inside li or we will have to add container as well inside?