SCSS set width based on classes

June 27, 2023

I’ve an HTML

.layout-20X80 {
    div.label-txt {
        width: 20%;

    }
    div.value-container {
        width: 80%
    }
}

.layout-30X70 {
    div.label-txt {
        width: 30%
    }
    div.value-container {
        width: 70%
    }
}

.layout-40X60 {
    div.label-txt {
        width: 40%
    }
    div.value-container {
        width: 60%
    }
}

<div class="dync-template tmp-bg layout-20X80">
  <div class="label-txt">Select Your Response</div>
    <div class="value-container">
      <mt-buttongroup toggle selectionMode="single" id="mtBtnRadioGroup" segmentedControl>
         <button class=" lmn-btn-default" *ngFor="let enum of fieldData.radioBtnGroup"  mtButton (click)="singleSelect(1)" [active]="enum.name==selectedItem">{{enum.name}}</button>
     </mt-buttongroup>
   </div>
</div>

I’ve multiple classes .layout-20X80, .layout-30X80 etc so based on the classes If I add to the parent div, I need label and value container adjacent to each other/one below the other. But even If I add .layout-50X50 (50% for both) they both stay one below the other. Is it because of block element? Any better solution to resolve it? Also, how can I avoid this repetitive CSS

>Solution :

Block elements always stays one after another, even if there is space for them. You need to set their display property to be inline-block to be shown as inline elements, but still keep block element properties (like accepting width and height)

[class*="layout-"] div {
  display: inline-block;
  
  /*
   * Using float to remove gap from whitespace between inline-blocks.
   * There is plenty of approaches. E.g. floated elements will be poped out of DOM flow
   */
  float: left;
}

.layout-20X80 div.label-txt {
  width: 20%
}

.layout-20X80 div.value-container {
  width: 80%
}

<div class="dync-template tmp-bg layout-20X80">
  <div class="label-txt">Select Your Response</div>
  <div class="value-container">
    <mt-buttongroup toggle selectionMode="single" id="mtBtnRadioGroup" segmentedControl>
      <button class=" lmn-btn-default" *ngFor="let enum of fieldData.radioBtnGroup" mtButton (click)="singleSelect(1)" [active]="enum.name==selectedItem">{{enum.name}}</button>
    </mt-buttongroup>
  </div>
</div>