Change css of div, if specific child div's are active

Question

I have a class with 4 different columns.

div class="mainContent">
        <div class="left-Col-1" *ngIf="data-1">
        </div>
        <div class="left-Col-2" *ngIf="!data-1">
        </div>
        <div class="right-Col-1" *ngIf="data-2">
        </div>
        <div class="right-Col-2" *ngIf="!data-2">
        </div>
</div>

Basicly i created a flexbox where i show two colums. If there's no data-1 in the first column i show div-right-2, and the same happens when theres no data-2, where i show div-left-2. If they both have data i show div-left-1 and div-right-1. My css looks like this:

.mainContent > *:nth-child(1){
 display: flex;
 flex-direction: column;
 flex-basis: 70%;
 padding: 0;
}
.mainContent > *:nth-child(2){
 display: flex;
 flex-direction: column;
 flex-basis: 30%;
 padding: 0;
}

The problem is that i want to change flex-basis to 50% in both div's if there is no data loaded (if first div is "left-div-2" and the second div "right-div-2"). Is that possible only using css or do i need to write some fucntion on typescript?

Ty for your help.