I’m trying to create a form that has radio dependent on other radios and I got most of the way there except for the style. I want the left-most column with the console logos to be a fixed height based on the max-content of the thumbnail grid (5×5) while also being evenly spaced (like justify-content:space-around).

For example, if you haven’t clicked anything, all the titles are squished together, but when you select “Super Mario Kart” or “Mario Kart 8”, it grows to the 5×5 grid specified in JS.

`

            <div class="Console">
                <div class="console-column">
                    <label>
                        <input type="radio" name="console" value="SNES" onclick="snesCourses();">
                        <div class="console-image">
                            <img src="./images/logos/Super-Mario-Kart.png" alt="Super Mario Kart">
                        </div>
                    </label>
                    <label>
                        <input type="radio" name="console" value="N64" onclick="n64Courses();">
                        <div class="console-image">
                            <img src="./images/logos/Mario-Kart-64.png" alt="Mario Kart 64">
                        </div>
                    </label>
                    <label>
                        <input type="radio" name="console" value="GBA" onclick="gbaCourses();">
                        <div class="console-image">
                            <img src="./images/logos/Mario-Kart-Super-Circuit.png" alt="Mario Kart Super Circuit">
                        </div>
                    </label>
                    <label>
                        <input type="radio" name="console" value="GCN" onclick="gcnCourses();">
                        <div class="console-image">
                            <img src="./images/logos/Mario-Kart-Double-Dash.png" alt="Mario Kart Double Dash">
                        </div>
                    </label>
                    <label>
                        <input type="radio" name="console" value="DS" onclick="dsCourses();">
                        <div class="console-image">
                            <img src="./images/logos/Mario-Kart-DS.png" alt="Mario Kart DS">
                        </div>
                    </label>
                    <label>
                        <input type="radio" name="console" value="Wii" onclick="wiiCourses();">
                        <div class="console-image">
                            <img src="./images/logos/Mario-Kart-Wii.png" alt="Mario Kart Wii">
                        </div>
                    </label>
                    <label>
                        <input type="radio" name="console" value="3DS" onclick="mk7Courses();">
                        <div class="console-image">
                            <img src="./images/logos/Mario-Kart-7.png" alt="Mario Kart 7">
                        </div>
                    </label>
                    <label>
                        <input type="radio" name="console" value="Tour" onclick="tourCourses();">
                        <div class="console-image">
                            <img src="./images/logos/Mario-Kart-Tour.png" alt="Mario Kart Tour">
                        </div>
                    </label>
                    <label>
                        <input type="radio" name="console" value="MK8" onclick="mk8Courses();">
                        <div class="console-image">
                            <img src="./images/logos/Mario-Kart-8.png" alt="Mario Kart 8">
                        </div>
                    </label>
                    <label>
                        <input type="radio" name="console" value="Booster Courses" onclick="boosterCourses();">
                        <div class="console-image">
                            <img src="./images/logos/Mario-Kart-8-Deluxe-Booster-Course-Pass.png" alt="Mario Kart 8 Deluxe Booster Courses">
                        </div>
                    </label>
                </div>
            </div>

body {
    display: grid; 
    grid-template-columns: 66% 33%; 
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr; 
    gap: 1% 1%; 
    grid-template-areas: 
        "Header Header"
        "Nav Nav"
        "Settings Settings"
        "Course Stats"
        "Footer Footer";
    height: 100vh;
}

.hide {
    display: none;
}

input[type="radio"]{
    display: none;
}

h1 {
    text-align: center;
    font-size: 16px;
}
.Header { 
    grid-area: Header; 
    background: teal;
}
.Nav { 
    grid-area: Nav; 
    background: salmon;
}
.Settings { 
    grid-area: Settings; 
    background: yellowgreen;
}
.Course {
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr; 
    grid-template-rows: 10% repeat(3, minmax(1, 1fr)); 
    gap: 5% 5%; 
    grid-template-areas: 
        ". . . Class Class"
        "Console Thumbnail Thumbnail Thumbnail Thumbnail"
        "Console Thumbnail Thumbnail Thumbnail Thumbnail"
        "Console Thumbnail Thumbnail Thumbnail Thumbnail"; 
    grid-area: Course; 
    background: brown;
    gap: var(--gap);
}
.Console {
    grid-area: Console;
    border: 5px solid #000000;
    border-radius: 10px;
    align-content: center;
}
.Class { 
    grid-area: Class; 
    background: blue;
}
.Thumbnail { 
    grid-area: Thumbnail; 
    background: purple;
    border: 5px solid #000000;
    border-radius: 10px;
}
.Stats { 
    grid-area: Stats; 
    background: orange;
}
.Footer { 
    grid-area: Footer; 
    background: green;
}

/* Console Header */
.console-column {
    display: table;
    height: auto;
}

.console-image img {
    cursor: pointer;
    display: block;
    opacity: 50%;
    transition: transform 250ms ease-in-out;
    max-width: 70%;
    max-height: 10%;
    margin: auto;

    &:hover {
        opacity: 80%;
        transition: opacity 250ms ease-in-out;
    }
}

.console-column input[type=radio]:checked + .console-image img{
    opacity: 100%;
    transform: scale(1.1);
    filter: drop-shadow(0px 0px 10px hsla(0, 0%, 0%, 0.75));
    transition: transform 250ms ease-in-out, filter 250ms ease-in-out;
}

/* Course Grid */
.course-container {
    display: flex;
}

.course-thumbnail img {
    cursor: pointer;
    display: block;
    opacity: 80%;
    max-width: 90%;
    transition: transform 250ms ease-in-out;
    border: 5px solid transparent;
    margin: 5% auto;

    &:hover {
        opacity: 100%;
        transition: opacity 250ms ease-in-out;
    }
}

.course-grid input[type=radio]:checked + .course-thumbnail img{
    border: 5px solid salmon;
    background-color: salmon;
    opacity: 100%;
    mask-image: linear-gradient(135deg, transparent 5px, gold 0),
                linear-gradient(-135deg, transparent 5px, gold 0),
                linear-gradient(45deg, transparent 5px, gold 0),
                linear-gradient(-45deg, transparent 5px, gold 0);
    mask-position: 0 0, 100% 0, 0 100%, 100% 100%;
    mask-repeat: no-repeat;
    mask-size: 51% 51%;
} 

function snesCourses(){ 
  document.getElementById('snesCourses').style.display = 'grid';
  document.getElementById('snesCourses').style.gridTemplateColumns = "repeat(5, 1fr)"; 
  document.getElementById('snesCourses').style.gridTemplateRows = "repeat(5, 1fr)"; 
  document.getElementById('mk8Courses').style.display = 'none';
}

function n64Courses(){ 
  document.getElementById('snesCourses').style.display = 'none';
  document.getElementById('mk8Courses').style.display = 'none';
}

function mk8Courses(){ 
  document.getElementById('snesCourses').style.display = 'none';
  document.getElementById('mk8Courses').style.display = 'grid';
  document.getElementById('mk8Courses').style.gridTemplateColumns = "repeat(5, 1fr)"; 
  document.getElementById('mk8Courses').style.gridTemplateRows = "repeat(5, 1fr)"; 
}

Here is a CodePen example

I know I have to change min-height of .course-container to something, I just don’t know what.