How to fix column width?

Question

css

Good day.
We have

<ul class="search-result list-inline">
    <li class="cat">{link-category}</li>
    .................................
    <li>{size} GB</li>
    <li class="search-item-user">{author}</li>
</ul>

CSS standard Bootstrap, my styles only tint the font

.list-inline li {
     display: inline-block;
     ....
}

The actual HTML code above is a string in the search results. Nothing can be added above this line or below (above or below ul ... / ul), the php code is closed. Content in {link-category} or {author} can be of different widths. The lines go under each other.
It is necessary that the entire column is automatically aligned to the width of the widest one.
If the width is set statically, the content can "float" overlaying adjacent elements. The problem itself is visible on the screen.

Please tell me how to solve it, preferably using bootstrap.
Note : bootstrap is used with responsiveness disabled.

Answer 1

Bootstrap has standard column tools. Create a grid through row, make two columns inside. One for 4, the second for 8. Or do you mean something else?