React responsive carousel changing the indicator to be full width of rectangles

Question

I'm attempting to make the indicators look rectangular and cover full width according to images length, like the following image:

Although the issue seems to be that, I cannot put the divs, side by side, they always stay as columns:

import 'react-responsive-carousel/lib/styles/carousel.min.css'
import { Carousel } from 'react-responsive-carousel'

<Carousel
          className="flex relative w-full h-[328px]  overflow-hidden bg-black mb-[17px]"
          showArrows={false}
          showThumbs={false}
          showStatus={false}
          autoPlay
          infiniteLoop
          renderIndicator={(_, selected, indIndex) => {
            console.log('called')
            return (
              <div className="flex flex-row gap-2">
                <div
                  className="w-[100px] h-[2px]"
                  style={{
                    background: selected ? 'red' : 'blue',
                  }}
                ></div>
              </div>
            )
          }}
        >
          {images.map((URL, index) => (
            <div className="object-cover h-full w-full">
              <img src={URL} key={index} />
            </div>
          ))}
        </Carousel>

The image contains 3 divs, the red one is too represent the selected one and the blue one the unselected ones.

Answer 1

Response:

 <Carousel
          className="flex relative w-full h-[328px]  overflow-hidden bg-black mb-[17px]"
          showArrows={false}
          showThumbs={false}
          showStatus={false}
          autoPlay
          infiniteLoop
          renderIndicator={(_, selected, index) => {
            const numIndicators = images.length
            const margin = '5px'
            const indicatorWidth = `calc((100% - ${margin} * ${numIndicators - 1}) / ${numIndicators})`

            return (
              <div
                className="inline-block"
                style={{
                  width: indicatorWidth,
                  height: '5px',
                  background: selected ? 'white' : 'grey',
                  marginRight: index !== numIndicators - 1 ? margin : '0',
                }}
              />
            )
          }}
        >
          {images.map((URL, index) => (
            <div className="object-cover h-full w-full">
              <img src={URL} key={index} />
            </div>
          ))}
        </Carousel>