Arrange compact inline list into a single line with CSS

[ThinhDinh]

<pre><span><style>

/*Image*/
[data-test="list-item"] .imageBaseStyle {
width:5%;
height:auto;
margin: -40px 0px -40px 0px;
padding: 10px;
border-radius: 50%;
position: fixed;
}

/*Left Image */

[data-test="list-item"].move-image-right .imageBaseStyle {
margin-left: -10px !important;
margin-right: 10px !important;
}

/*Left Text*/
[data-test="list-item"] .textStyle.topItem{
margin: 0px 0 0 15%;
width:25%;
border-radius: 5px; 
background:  #2e3442;
background-size: contain;
text-align: center;
font-size: 100%;
color: white !important;
line-height : 10px;
padding: 10px 7px;
font-weight: 600;
}

/*Middle text*/
[data-test="list-item"] .textDetailStyle {
width:25%;
margin: -30px 0 0 45%;
border-radius: 5px; 
background:  #2e3442;
background-size: contain;
text-align: center;
font-size: 100%;
color: white !important;
line-height : 10px;
padding: 10px 7px;
font-weight: 600;
}

/*Right text*/
[data-test="list-item"] .textCaptionStyle {
width:25%;
margin: -30px 0 0 75%;
border-radius: 5px; 
background:  #2e3442;
background-size: contain;
text-align: center;
font-size: 100%;
color: white !important;
line-height : 10px;
padding: 10px 7px;
font-weight: 600;
}

Nice idea!