/* two columns

column1  sidecolumnThatMoves
column1  sidecolumnThatMoves  
column1  sidecolumnThatMoves  
column1  sidecolumnthathides
column1  sidecolumnthathides
column1  sidecolumnthathides
column1  sidecolumnthathides
column1  sidecolumnthathides

*/
.twoColumnsContainer {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Main column (2fr), side column (1fr) */
    gap: 10px;
    padding: 20px;
    align-items: start;
    max-width:1200px;
    margin: 0 auto;
}

/* Main column */
.twoColumnsMain {
    min-height: 400px; /* Example height */
}

/* Side column containing two divs */
.twoColumnsSide {
    display: grid;
    grid-template-rows: auto auto;
    gap: 10px;
    border: 2px solid #ddd;
    border-radius: 10px 10px;
    vertical-align:top;
}

.twoColumnsSideChild {
    padding: 10px;
}

/* Responsive adjustments */
@media (max-width: 1000px) {
    .twoColumnsContainer {
        grid-template-columns: 1fr; /* Single column layout */
    }

    .twoColumnsSide {
        grid-template-rows: auto; /* Adjust layout of side-column */
        order: 2; /* Moves side column under main column */
    }

    .twoColumnsSideChild:last-child {
        display: none; /* Hides the first div */
    }
}