How to create elements that fill the line evenly to the end, like on img below?

Question

I wonder what is the best way to do it like img. I mean block alignment from left to right and taking the maximum length of the row. Which is better, write a script specifying and adapting the block size to the container size, or do it somehow using the css grid. I don't want a ready solution, just tips. Regarding the code, I wrote only so much and I think how to transform it. That's why I'm looking for a hint (What I want to get https://i.ibb.co/jkgTrzT/how-to-create-a-row-of-elements-of-different-width-inside-grid.png)(what I got https://i.ibb.co/p0NkD8K/what-I-got.png )

HTML:

<div class="tags">
    <a href="">food</a>
    <a href="">photography</a>
    <a href="">web design</a>
    <a href="">art</a>
    <a href="">love</a>
    <a href="">business</a>
</div>

CSS:

.tags {
    padding: 20px 0;
}

.tags a {
    padding: 12px 24px;
    font-size: 13px;
    text-transform: uppercase;
    border: 1px solid rgba(144, 144, 144, .5);
    color: black;
    margin: 0 15px 15px 0;
    display: inline-block;
    transition: .5s ease;
}

Answer 1

You need to display the tags in flexbox. When the tags have flex: 1; , they will fill up remaining space.

.tags {
    display: flex;
    flex-wrap: wrap;
}
.tag {
    display: block;
    flex: 1;
    min-width: something;
    white-space: nowrap;
}

Answer 2

If you know what widths to expect in your a elements, you could just use float and clear styles, something like this:

 .tags { width: 270px; padding: 20 px 0; } .tags a { padding: 12px 24px; font-size: 13px; text-transform: uppercase; border: 1px solid rgba(144, 144, 144, .5); color: black; display: inline-block; transition: .5s ease; } .left { float: left; margin: 0 15px 15px 0; } .right { float: right; margin: 0 15px 15px 0; } .clear{ clear: both; } 

 <div class="tags"> <div class="clear"> <div class="left"><a href="">food</a></div> <div class="right"><a href="">photography</a></div> </div> <div class="clear"> <div class="left"><a href="">web design</a></div> <div class="right"><a href="">art</a></div> </div> <div class="clear"> <div class="left"><a href="">love</a></div> <div class="right"><a href="">business</a></div> </div> </div>