Problem with css/sass in a box with multiples elements-CodePudding

im having a problem, i build this image:

as you can see its a box with 4 elements inside. Its looks fine but when i start to re-size the windows it become a mess. idk what proporty im doing wrong, but i gonna give you a .gif of what is happening

https://imgur.com/gallery/VZQAKFY

this is what becomes when i re-zice THIS IS THE MESS WHEN I RE-SIZE THE WINDOW this is my code:

html:

<div >
<div class= firstTittleRow1>
 <div >
   <mat-icon  [ngStyle]="{'color':'#f06f0f'}">warning</mat-icon>
 </div>
<div class= secondTittleRow>
  <div >
    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 >
 <div >
  <p >
    ¿Desea repartir en partes iguales el porcentaje
    de participación de la  {{prioridad}}?
  </p>
 </div>

   <div >
    Yes
  </div>
  <div >
   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

How can i make to not look like that? and keep the order of that 4 elements inside, i dont mind if the buttoms go down but keep the order in the main square. ty very much

CodePudding user response：

Remove fixed heights from .containerRebalance, .secondTittleRow and .firstTittleRow1, and add display:flex to .containerRebalance

.containerRebalance
// height: 113px 'Remove This'
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
display: flex

.firstTittleRow1
  padding-left: 10px
  // height: 73px 'Remove This'
  display: block

.secondTittleRow
  display: flex
  padding-left: 10px
  // height: 73px 'Remove This'

you can see it here