具有多个元素的框中的 css/sass 问题

我有一个问题，我建立这个图像：

盒子

正如你所看到的，它是一个里面有 4 个元素的盒子。它看起来不错，但是当我开始重新调整窗口大小时，它变得一团糟。我知道我做错了什么，但我会给你一个正在发生的事情的 .gif

https://imgur.com/gallery/VZQAKFY

当我重新调整窗口大小时，这是一团糟，这是我的代码：

html:

<div class="containerRebalance">
<div class= firstTittleRow1>
 <div class="iconwarning">
   <mat-icon  [ngStyle]="{'color':'#f06f0f'}">warning</mat-icon>
 </div>
<div class= secondTittleRow>
  <div class="textoWarning">
    Para enviar tu solicitud de modificación, es necesario
    que los porcentajes de participación por cada
    beneficiario sea mayor a cero y que la suma de las
    participaciones en cada prioridad sea igual al 100% 
  </div>
 </div>
 <div class="linetext">
 <div class="texto1">
  <p class="texto1">
    ¿Desea repartir en partes iguales el porcentaje
    de participación de la  {{prioridad}}?
  </p>
 </div>

   <div class="texto2">
    Yes
  </div>
  <div class="texto2">
   No
 </div>
 </div>
 </div>
 </div>

SASS

.texto1
  float: left
  margin-top: -1px
  margin-left: 12px
  font-size: 14px
  line-height: 21px
  font-family: "Titillium Web", sans-serif
  font-weight: 400
  color: rgb(96, 110, 125)
.texto2
  font-size: 14px
  line-height: 21px
  font-family: "Titillium Web", sans-serif
  font-weight: 400
  color: rgb(96, 110, 125)
  float: right
  padding-right: 55px

.iconwarning
  float: left
  padding-top: 24px

.firstTittleRow1
  padding-left: 10px
  height: 73px
  display: block

.linetext
  display: block

.textoWarning
  font-size: 14px
  line-height: 18px
  font-family: "Titillium Web", sans-serif
  font-weight: 400
  color: rgb(96, 110, 125)
  padding-top: 20px




.secondTittleRow
  display: flex
  padding-left: 10px
  height: 73px
.containerRebalance
    height: 113px
    background: #fdf6e9
    border: 1px solid #f9ce93
    color: #4d5966
    font-size: 0.75rem
    font-family: Roboto-Medium
    align-items: center
    padding: 0 0.9375rem
    line-height: 17px
    margin-top: 48px
    padding-bottom: 1px

我怎样才能让它看起来不像那样？并保持这 4 个元素的顺序在里面，我不介意按钮是否下降，但保持主广场的顺序。非常非常