Build sliding calendar card with HTML, CSS and React

Question

I would like to obtain this control on a web page:

You can scroll the month and the days in the card slide back and forth. I'm using react with bootstrap. Each day card is a column. The name of the day and the day number are centered. I would like to display a little icon next to the day, on the right of the card.

This is my code

   render() {
        return (
            <div id="calendar-box">
                <div id="scrolltoolbar" className="text-center">
                    <i onClick={this.changeDay.bind(this, BACK)} className="fas fa-arrow-left icon-left"></i>
                    <span className="month-label">{months[this.state.currentMonth]}</span>
                    <i onClick={this.changeDay.bind(this, FWD)} className="fas fa-arrow-right icon-right"></i>
                </div>
                <div className="container-fluid">
                    <div className="row">
                        <div className="col-lg-1 month-label text-center">
                            <p className="name-of-day">Giovedì</p>
                            <p className="number-of-day"><strong>07</strong></p>
                            <i className="fa-solid fa-circle-info info-icon"></i>
                        </div>
                        <div className="col-lg-1 month-label"></div>
                        <div className="col-lg-1 month-label"></div>
                        <div className="col-lg-1 month-label"></div>
                        <div className="col-lg-1 month-label"></div>
                        <div className="col-lg-1 month-label"></div>
                        <div className="col-lg-1 month-label"></div>
                        <div className="col-lg-1 month-label"></div>
                        <div className="col-lg-1 month-label"></div>
                        <div className="col-lg-1 month-label"></div>
                        <div className="col-lg-1 month-label"></div>
                        <div className="col-lg-1 month-label"></div>
                    </div>
                </div>
            </div>
        );

and the CSS

.month-label {
    box-sizing: border-box;
    border: 2px solid red;
    border-radius: 20px;
    background-clip: padding-box;
    height: 64px;
    position: relative;
}

.name-of-day {
    font-size: x-small;
    margin: 0;
}

.number-of-day {
    font-size: xx-large;
    margin: 0;
}

.info-icon {
    position: absolute;
    left: 70%;
    top: 45%;
    font-size: small;
    color: blue;
}

I got the result but I'm not sure that this is the best solution. To get responsive result I think to play with hiding some card.

Can you suggest a better practice? Thank you!