Problems defining sizes in flexbox items

Question

I am a laywoman in flexbox, and I have difficulty in aligning the items inside the flex, I determined size for them, but when it comes to positioning, they don’t look the same, they always look different and I want a pattern for everyone. If anyone can see in my code where I’m missing, I’d appreciate it.

This is the layout It needs to look like this

My code below

<div class="container">
                        <!-- Linha 1: flex-direction: row -->
                        <div class="flex1">
                            <div   class="dltop"> <!-- flex: 0.75, flex-direction: row -->
                               <div>
                                <!-- col 1: IMAGEM ICON aqui -->
                               </div>
                               <div>
                                <div id="overflow_ellipsis">Objetivo: <?=$linha['objetivo'];?></div>
                               </div>
                            </div>

                            <div class="dlbottom">
                                <div class="gat"><strong>Gatilho/Situação:</strong> <?=$linha['situacao_gatilho'];?></div>
                            </div>

                            <div class="dcbottom">
                                <div class="canalproposto">Canais: <?=$linha['canal_proposto'];?></div>

                                    <div class="fase">Fase: <?=$linha['fase'];?></div>
                                    <div class="cod">Código: <?=$linha['codigo'];?></div> 
                            </div>
                        </div>
                        <!-- Linha 2: flex-direction: row -->
                        <div class="flex2">

                            <div  class="drtop">
                                <!-- flex: 0.25 -->
                                <div class="sit">Situação: <?=$linha['data'];?></div>
                               <button class="but"> Detalhes </button>
                            </div>

                        </div> 
              </div>

css

* {
    margin: 0;
    padding: 0;
}
header h2 {
    text-align: center;
    margin-top: 10px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 25px;
}
.container{
   flex-wrap: wrap;
   border: 1px solid black;
}
#overflow_ellipsis{
    width:70%;
    white-space: nowrap;    
    overflow: hidden;
    text-overflow: ellipsis;
}
.dltop{
    width:80%;
    font-size: 15px;
    font-weight: bold;
    background-color: orange;
}
.dlbottom{
    width:30%;
}
.dcbottom{
    justify-content: center;
    width: 60%;
}
.flex1{
    flex-direction: row;
}
.gat{
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.but{
    font-size: 14px;
    float: right;
    margin-bottom: 30px;
}
.sit{
    font-size: 14px;
    float: right;
    background-color: tomato;
    width: 20%;
}
.gat{
    font-size: 14px;
    background-color: #34ce57;
}
.fase{
    background-color: #f1b0b7;
}
.canalproposto{
    background-color: chartreuse;
}
.cod{
    background-color: lightcoral;
}

Answer 1

I redid the structure html and css, continued using flexbox as informed.

Upshot: https://imgur.com/fX9AzyL

HTML

<div class="container">
    <div class="titulo-situacao">
        <div class="titulo">
            <img src="https://www.nicepng.com/png/detail/815-8156958_apresentar-o-carto-golden-cross-rg-e-o.png">
            <h4>Negativa de compra (motivos e providências)</h4>
        </div>
        <div class="situacao">
            <div class="s1">
                <label>Situação</label>
                <div>VIRGENTE</div>
            </div>
            <div class="s2">
                <label>1,02%</label>
                <div>Eficiência</div>
            </div>
            <div class="s3">
                <label>MOTOR</label>
                <div>CAMPANHA</div>
            </div>
        </div>
    </div>
    <div class="body-modulo">
        <div class="objetivo-gatilho">
            <div class="objetivo">
                <label>Objetivo: </label>
                <span>Informar o motivo da negativa de compra e outras opções para finalizar a transação</span>
            </div>
            <div class="gatilho">
                <label>Gatilho/Situação: </label>
                <span>Compra negada por limite de crédito (a vista ou parcelada)</span>            
            </div>
        </div>
        <div class="canais-fase-codigo">
            <div class="canais">
                <label>Canais: </label>
                <div>NM</div>
                <div>SMS</div>
            </div>
            <div class="fase-codigo">
                <div class="fase">Fase: fidelização</div>
                <div class="codigo">C05</div>
                <button class="detalhes">DETALHES ></button>
            </div>
        </div>
    </div>
</div>

CSS

*{
  padding: 0px;
  margin: 0px
}
body{
  font-family: 'Source Sans Pro',sans-serif;
}
.container{
    margin: 5px;
    padding: 10px;
    background-color: #fff;
    border: 1px solid orange
}
.titulo-situacao{
    display: flex;
    width: 100%
}
.titulo-situacao .titulo{
    width: 70%;
    display: flex;
    align-items: center;
}
.titulo-situacao .titulo h4{
    font-size: 30px;
    padding-left: 5px;
    font-weight: bold;
    color: #126698
}
.titulo-situacao .titulo img{
    width: 77px
}
.titulo-situacao .situacao{
    width: 30%
}
.titulo-situacao .situacao div:first-child{
    width: 100%
}
.titulo-situacao .situacao .s1,
.titulo-situacao .situacao .s2,
.titulo-situacao .situacao .s3{
    display: flex
}
.titulo-situacao .situacao .s1 label{
    width: 50%;
    text-align: center;
    font-weight: unset;
}
.titulo-situacao .situacao .s1 div{
    background-color: #3c763d;
    color: #fff;
    width: 50%;
    text-align: center
}
.titulo-situacao .situacao .s2 label{
    width: 50%;
    text-align: center;
    color: #3c8dbc
}
.titulo-situacao .situacao .s2 div{
    width: 50%;
    text-align: left
}
.titulo-situacao .situacao .s3 label{
    width: 50%;
    text-align: center;
    font-weight: unset;
}
.titulo-situacao .situacao .s3 div{
    width: 50%;
    text-align: center;
    color: #ddd
}

.body-modulo{
    width: 100%;
    display: flex
}
.objetivo-gatilho{
    width: 50%
}
.objetivo-gatilho .objetivo{
    width: 100%
}
.objetivo-gatilho .objetivo label,
.objetivo-gatilho .gatilho label{
    color: #3c8dbc
}
.canais-fase-codigo{
    width: 50%
}
.canais-fase-codigo .canais{
    width: 100%;
    display: flex;
    align-items: center
}
.canais-fase-codigo .canais label{
    color: #3c8dbc
}
.canais-fase-codigo .canais div{
    background-color: #126698;
    color: #e8943d;
    margin-left: 5px;
    padding: 5px 15px;
    border-radius: 3px
}
.canais-fase-codigo .fase-codigo{
    width: 100%;
    display: flex;
    margin-top: 10px
}
.canais-fase-codigo .fase-codigo .fase{
    width: 60%;
    background-color: #80b6d6;
    color: #fff;
    margin: 0px 5px;
    padding: 3px;
    font-size: 17px
}
.canais-fase-codigo .fase-codigo .codigo{
    width: 15%;
    background-color: #80b6d6;
    color: #fff;
    margin: 0px 5px;
    padding: 3px;
    font-size: 17px
}
.canais-fase-codigo .fase-codigo .detalhes{
    width: 25%;
    background-color: #126698;
    color: #fff;
    border: 0px
}