Placing circles generated in css side by side without use of table in markdown file

I am drawing some circles using css. Here is how I do it:

circle {
    background: #f00;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

and here is how I use it in a markdown file:

<circle>Text</circle>

I want to place a number of these circles side-by-side with a little space between them, not on top of each other. I know I can use table and put them on a table, but the issue is that if the website is responsive then the circles will stay in a table row, for example with 3 circles in each row, and it will look very bad on mobile devices. I can put actual images, for example, .png files, side by side without a table and on mobile devices, the images will wrap around and everything looks good. Is there a way to do the same thing when I draw circles using css?