How to increse the width of the middle div in Blazor razor page?

I have the following in my razor component.

<div class="d-flex justify-content-center"><div class="p-2 bd-highlight"><fieldset class="border p-1"><legend class="float-none w-auto p-1 fs-6">Please select lesson type:</legend><div class="row p-1"><div class="col-lg-12">                    Already enrolled in classes?  Please login here. <a href="StudentLogin">Student Login</a><p></p></div></div><div class="row p-1"><InputRadioGroup @bind-Value="lessonType.LessonTypeID">            @foreach (var lesson in lessonTypesList)                {<div class="col-4"><InputRadio Value="lesson.LessonTypeID" /><label style="margin-right:10px">@lesson.LessonType</label></div>                }</InputRadioGroup></div>            @if (lessonType.LessonTypeID != 0)            {<div class="row p-1"><p></p><button class="btn btn-primary btn-sm" @onclick="EnrollInLesson">Enroll (Price:@GetLessonPrice(@lessonType.LessonTypeID))</button></div>            }</fieldset></div>

And it renders as follows. However, the middle div should automatically expand so that the option "6-Hour Lessons" should not wrap.

Thanks in advance.