Dynamic div block based on copy length

Hello everyone,

I’m currently creating a blog style website in which each blog article will be associated with certain tags.

These tags should be displayed in the blog cards on the blog overview page as seen in the image below (“E-Commerce”):

Screenshot 2023-01-26 at 13.10.45

My question:
We would like to have this tag structure around the copy to be dynamic in size, based on the length of the copy. How can I achieve that?

Looking forward to your replies.



Your Q is not clear. Add maybe two screenshots (To show the idea of the length).

Here you can see an example of how it should look. Shorter tags will have shorter boxes around them and longer ones will have longer boxes. So the size of the box to be dynamic in regards to the copy input.

Your share only link is not working

Sorry, didn’t mean to share a link. I just removed it.

But is the question more clear now with the second screenshot?

So basically I want the div block of each of the tags (the rounded boxes) to be dynamic in size, depending on the text input.
So something like defining “Always have the rounded box to be 5px wider than the copy”.