CSS grid and vertical text

Question

I have a css grid of 5 columns and dynamic rows that I build like this:

  <div className="grid-row-wrapper" key={position} >
                            
         <div className={nextClass} style={nextStyle}> </div>
         <div className="grid-item px-2" style={eventStyle}>{number}</div>
         <div className="grid-item" style={eventStyle}>
          {formattedName[0].toUpperCase()} {formattedName[1]}
         </div>
         <div className="grid-item" style={eventStyle}>{location}</div>
         <div className="grid-item px-1" style={eventStyle}> {time} </div>
 </div>

eventStyle sets the background of that col with a different color if the event is an upcoming event, in order to have the whole row highlighted. The first div is empty because I want that when is an upcoming event(always 3 events) the first column of these 3 events shows a vertical text like "next". Is possible to do so?