I am in the process of developing a calendar application that includes a header row and a header column. The layout displays six days in columns with a fixed number of time periods per day.
<div class="row">
<div class="col-md col-sm-12 mt-3 border border-secondary" style="background-color:lightgray">
<div class="row text-center"><strong>Period</strong></div>
@foreach ( config('enums.class_periods') as $key => $class_period)
<div class="row border-top border-secondary text-center d-flex align-content-stretch flex-wrap"><strong>{{ $class_period }}</strong></div>
@endforeach
</div>
@foreach ($week_array as $weekday)
<div class="col-md col-sm-12 mt-3 border border-secondary {{$weekday==$today ? "border-primary" : "" }}" style="{{ $loop->even ? "background-color:lightgray":"" }}">
<div class="row text-center"><strong>{{ $weekday }}</strong></div>
@foreach ( config('enums.class_periods') as $key => $class_period)
<div class="row border-top border-secondary text-center"><p>-</p></div>
@endforeach
</div>
@endforeach
</div>
https://i.sstatic.net/cRodq.png
I am looking for a solution to make the rows in the header column the same height as the rows in the day columns. The content in the day columns' rows will be dynamic and may stretch significantly, so I need the header rows to adjust accordingly. I have tried various suggestions I found online, but none seem to work for my specific case. Any help or guidance on this would be greatly appreciated.