align text and images inside divs side by side-CodePudding

So I've made this ul with a list of li in. In each li, are there some div with text and images in. I have a problem where my text and images aren't in a line anymore, and I can't seem to fix it.

Just to show my problem I've set style="width: 100px;", because I'm trying to get something like this, even though this is on:

/* Weather icon on dashboard */

.element_weather {
    min-height: 30px !important;
    min-width: 30px !important;
}

.container_weather {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.elements_weather {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.white {
    fill: #edf8ff
}

.gray {
    fill: #cecece
}

.yellow {
    fill: #fabb33
}

.blue {
    fill: #83bfff
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<ul id="tog_success-123" class="list-group list-group-flush rounded" style="width: 100px;">
   <li id="1" class="list-group-item list-group-item-success">
      <a class="text-dark" href="TestResults?blablabla" target="_blank" >
         <div class="row justify-content-between">
            <div class="col-s-6 text-justify">
               test - 12345
            </div>
            <div class="col-s-6 d-flex ml-auto mr-0">
               <div class="col-s-3 mt-1 ml-1 mr-1">
                  <img src="https://camo.githubusercontent.com/4f70df5863fcc35898abfdc8a60628bb6aabf0fea2225cb9c63d3641c48711ef/68747470733a2f2f61746c61737369616e2e67616c6c65727963646e2e76736173736574732e696f2f657874656e73696f6e732f61746c61737369616e2f61746c6173636f64652f312e342e302f313535383132333132313437352f4d6963726f736f66742e56697375616c53747564696f2e53657276696365732e49636f6e732e44656661756c74" alt="Girl in a jacket" width="14" height="14">
               </div>
               <div class="col-s-3">
                  <div id="svg_dashboard_weather" class="element_weather" title="5/5">
                     <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 44.9 44.9" style="enable-background:new 0 0 44.9 44.9;" xml:space="preserve" height="25px" width="25px">
                        <g id="Sun">
                           <circle id="XMLID_61_" class="yellow" cx="22.4" cy="22.6" r="11"/>
                           <g>
                              <path id="XMLID_60_" class="yellow" d="M22.6,8.1h-0.3c-0.3,0-0.6-0.3-0.6-0.6v-7c0-0.3,0.3-0.6,0.6-0.6l0.3,0c0.3,0,0.6,0.3,0.6,0.6 v7C23.2,7.8,22.9,8.1,22.6,8.1z"/>
                              <path id="XMLID_59_" class="yellow" d="M22.6,36.8h-0.3c-0.3,0-0.6,0.3-0.6,0.6v7c0,0.3,0.3,0.6,0.6,0.6h0.3c0.3,0,0.6-0.3,0.6-0.6v-7 C23.2,37,22.9,36.8,22.6,36.8z"/>
                              <path id="XMLID_58_" class="yellow" d="M8.1,22.3v0.3c0,0.3-0.3,0.6-0.6,0.6h-7c-0.3,0-0.6-0.3-0.6-0.6l0-0.3c0-0.3,0.3-0.6,0.6-0.6h7 C7.8,21.7,8.1,21.9,8.1,22.3z"/>
                              <path id="XMLID_57_" class="yellow" d="M36.8,22.3v0.3c0,0.3,0.3,0.6,0.6,0.6h7c0.3,0,0.6-0.3,0.6-0.6v-0.3c0-0.3-0.3-0.6-0.6-0.6h-7 C37,21.7,36.8,21.9,36.8,22.3z"/>
                              <path id="XMLID_56_" class="yellow" d="M11.4,31.6l0.2,0.3c0.2,0.2,0.2,0.6-0.1,0.8l-5.3,4.5c-0.2,0.2-0.6,0.2-0.8-0.1l-0.2-0.3 c-0.2-0.2-0.2-0.6,0.1-0.8l5.3-4.5C10.9,31.4,11.2,31.4,11.4,31.6z"/>
                              <path id="XMLID_55_" class="yellow" d="M33.2,13l0.2,0.3c0.2,0.2,0.6,0.3,0.8,0.1l5.3-4.5c0.2-0.2,0.3-0.6,0.1-0.8l-0.2-0.3 c-0.2-0.2-0.6-0.3-0.8-0.1l-5.3,4.5C33,12.4,33,12.7,33.2,13z"/>
                              <path id="XMLID_54_" class="yellow" d="M11.4,13.2l0.2-0.3c0.2-0.2,0.2-0.6-0.1-0.8L6.3,7.6C6.1,7.4,5.7,7.5,5.5,7.7L5.3,7.9 C5.1,8.2,5.1,8.5,5.4,8.7l5.3,4.5C10.9,13.5,11.2,13.5,11.4,13.2z"/>
                              <path id="XMLID_53_" class="yellow" d="M33.2,31.9l0.2-0.3c0.2-0.2,0.6-0.3,0.8-0.1l5.3,4.5c0.2,0.2,0.3,0.6,0.1,0.8l-0.2,0.3 c-0.2,0.2-0.6,0.3-0.8,0.1l-5.3-4.5C33,32.5,33,32.1,33.2,31.9z"/>
                              <animate attributeType="CSS"
                                 attributeName="opacity"
                                 attributeType="XML"
                                 dur="0.5s"
                                 keyTimes="0;0.5;1"
                                 repeatCount="indefinite"
                                 values="1;0.6;1"
                                 calcMode="linear"/>
                           </g>
                        </g>
                     </svg>
                  </div>
               </div>
            </div>
         </div>
      </a>
   </li>
</ul>

Edit

When my li column is getting two small in width, then the icons row jumps under, and it shouldn't.

CodePudding user response：

Currently, your .row gets applied a flex-wrap:wrap that comes from bootstrap.css.

You can overwrite it with flex-wrap: nowrap :

/* Weather icon on dashboard */

.element_weather {
    min-height: 30px !important;
    min-width: 30px !important;
}

.container_weather {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.elements_weather {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.white {
    fill: #edf8ff
}

.gray {
    fill: #cecece
}

.yellow {
    fill: #fabb33
}

.blue {
    fill: #83bfff
}

.row {
    border : blue dashed 1px;
    flex-wrap : nowrap!important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<ul id="tog_success-123" class="list-group list-group-flush rounded" style="width: 100px;">
   <li id="1" class="list-group-item list-group-item-success">
      <a class="text-dark" href="TestResults?blablabla" target="_blank" >
         <div class="row justify-content-between">
            <div class="col-s-6 text-justify">
               test - 12345
            </div>
            <div class="col-s-6 d-flex ml-auto mr-0">
               <div class="col-s-3 mt-1 ml-1 mr-1">
                  <img src="https://camo.githubusercontent.com/4f70df5863fcc35898abfdc8a60628bb6aabf0fea2225cb9c63d3641c48711ef/68747470733a2f2f61746c61737369616e2e67616c6c65727963646e2e76736173736574732e696f2f657874656e73696f6e732f61746c61737369616e2f61746c6173636f64652f312e342e302f313535383132333132313437352f4d6963726f736f66742e56697375616c53747564696f2e53657276696365732e49636f6e732e44656661756c74" alt="Girl in a jacket" width="14" height="14">
               </div>
               <div class="col-s-3">
                  <div id="svg_dashboard_weather" class="element_weather" title="5/5">
                     <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 44.9 44.9" style="enable-background:new 0 0 44.9 44.9;" xml:space="preserve" height="25px" width="25px">
                        <g id="Sun">
                           <circle id="XMLID_61_" class="yellow" cx="22.4" cy="22.6" r="11"/>
                           <g>
                              <path id="XMLID_60_" class="yellow" d="M22.6,8.1h-0.3c-0.3,0-0.6-0.3-0.6-0.6v-7c0-0.3,0.3-0.6,0.6-0.6l0.3,0c0.3,0,0.6,0.3,0.6,0.6 v7C23.2,7.8,22.9,8.1,22.6,8.1z"/>
                              <path id="XMLID_59_" class="yellow" d="M22.6,36.8h-0.3c-0.3,0-0.6,0.3-0.6,0.6v7c0,0.3,0.3,0.6,0.6,0.6h0.3c0.3,0,0.6-0.3,0.6-0.6v-7 C23.2,37,22.9,36.8,22.6,36.8z"/>
                              <path id="XMLID_58_" class="yellow" d="M8.1,22.3v0.3c0,0.3-0.3,0.6-0.6,0.6h-7c-0.3,0-0.6-0.3-0.6-0.6l0-0.3c0-0.3,0.3-0.6,0.6-0.6h7 C7.8,21.7,8.1,21.9,8.1,22.3z"/>
                              <path id="XMLID_57_" class="yellow" d="M36.8,22.3v0.3c0,0.3,0.3,0.6,0.6,0.6h7c0.3,0,0.6-0.3,0.6-0.6v-0.3c0-0.3-0.3-0.6-0.6-0.6h-7 C37,21.7,36.8,21.9,36.8,22.3z"/>
                              <path id="XMLID_56_" class="yellow" d="M11.4,31.6l0.2,0.3c0.2,0.2,0.2,0.6-0.1,0.8l-5.3,4.5c-0.2,0.2-0.6,0.2-0.8-0.1l-0.2-0.3 c-0.2-0.2-0.2-0.6,0.1-0.8l5.3-4.5C10.9,31.4,11.2,31.4,11.4,31.6z"/>
                              <path id="XMLID_55_" class="yellow" d="M33.2,13l0.2,0.3c0.2,0.2,0.6,0.3,0.8,0.1l5.3-4.5c0.2-0.2,0.3-0.6,0.1-0.8l-0.2-0.3 c-0.2-0.2-0.6-0.3-0.8-0.1l-5.3,4.5C33,12.4,33,12.7,33.2,13z"/>
                              <path id="XMLID_54_" class="yellow" d="M11.4,13.2l0.2-0.3c0.2-0.2,0.2-0.6-0.1-0.8L6.3,7.6C6.1,7.4,5.7,7.5,5.5,7.7L5.3,7.9 C5.1,8.2,5.1,8.5,5.4,8.7l5.3,4.5C10.9,13.5,11.2,13.5,11.4,13.2z"/>
                              <path id="XMLID_53_" class="yellow" d="M33.2,31.9l0.2-0.3c0.2-0.2,0.6-0.3,0.8-0.1l5.3,4.5c0.2,0.2,0.3,0.6,0.1,0.8l-0.2,0.3 c-0.2,0.2-0.6,0.3-0.8,0.1l-5.3-4.5C33,32.5,33,32.1,33.2,31.9z"/>
                              <animate attributeType="CSS"
                                 attributeName="opacity"
                                 attributeType="XML"
                                 dur="0.5s"
                                 keyTimes="0;0.5;1"
                                 repeatCount="indefinite"
                                 values="1;0.6;1"
                                 calcMode="linear"/>
                           </g>
                        </g>
                     </svg>
                  </div>
               </div>
            </div>
         </div>
      </a>
   </li>
</ul>

CodePudding user response：

row changed to col, and d-flex added

/* Weather icon on dashboard */

.element_weather {
    min-height: 30px !important;
    min-width: 30px !important;
}

.container_weather {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.elements_weather {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.white {
    fill: #edf8ff
}

.gray {
    fill: #cecece
}

.yellow {
    fill: #fabb33
}

.blue {
    fill: #83bfff
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<ul id="tog_success-123" class="list-group list-group-flush rounded" style="width: 100px;">
   <li id="1" class="list-group-item list-group-item-success">
      <a class="text-dark" href="TestResults?blablabla" target="_blank" >
         <div class="col d-flex justify-content-between">
            <div class="col-s-6 text-justify">
               test - 12345
            </div>
            <div class="col-s-6 d-flex ml-auto mr-0">
               <div class="col-s-3 mt-1 ml-1 mr-1">
                  <img src="https://camo.githubusercontent.com/4f70df5863fcc35898abfdc8a60628bb6aabf0fea2225cb9c63d3641c48711ef/68747470733a2f2f61746c61737369616e2e67616c6c65727963646e2e76736173736574732e696f2f657874656e73696f6e732f61746c61737369616e2f61746c6173636f64652f312e342e302f313535383132333132313437352f4d6963726f736f66742e56697375616c53747564696f2e53657276696365732e49636f6e732e44656661756c74" alt="Girl in a jacket" width="14" height="14">
               </div>
               <div class="col-s-3">
                  <div id="svg_dashboard_weather" class="element_weather" title="5/5">
                     <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 44.9 44.9" style="enable-background:new 0 0 44.9 44.9;" xml:space="preserve" height="25px" width="25px">
                        <g id="Sun">
                           <circle id="XMLID_61_" class="yellow" cx="22.4" cy="22.6" r="11"/>
                           <g>
                              <path id="XMLID_60_" class="yellow" d="M22.6,8.1h-0.3c-0.3,0-0.6-0.3-0.6-0.6v-7c0-0.3,0.3-0.6,0.6-0.6l0.3,0c0.3,0,0.6,0.3,0.6,0.6 v7C23.2,7.8,22.9,8.1,22.6,8.1z"/>
                              <path id="XMLID_59_" class="yellow" d="M22.6,36.8h-0.3c-0.3,0-0.6,0.3-0.6,0.6v7c0,0.3,0.3,0.6,0.6,0.6h0.3c0.3,0,0.6-0.3,0.6-0.6v-7 C23.2,37,22.9,36.8,22.6,36.8z"/>
                              <path id="XMLID_58_" class="yellow" d="M8.1,22.3v0.3c0,0.3-0.3,0.6-0.6,0.6h-7c-0.3,0-0.6-0.3-0.6-0.6l0-0.3c0-0.3,0.3-0.6,0.6-0.6h7 C7.8,21.7,8.1,21.9,8.1,22.3z"/>
                              <path id="XMLID_57_" class="yellow" d="M36.8,22.3v0.3c0,0.3,0.3,0.6,0.6,0.6h7c0.3,0,0.6-0.3,0.6-0.6v-0.3c0-0.3-0.3-0.6-0.6-0.6h-7 C37,21.7,36.8,21.9,36.8,22.3z"/>
                              <path id="XMLID_56_" class="yellow" d="M11.4,31.6l0.2,0.3c0.2,0.2,0.2,0.6-0.1,0.8l-5.3,4.5c-0.2,0.2-0.6,0.2-0.8-0.1l-0.2-0.3 c-0.2-0.2-0.2-0.6,0.1-0.8l5.3-4.5C10.9,31.4,11.2,31.4,11.4,31.6z"/>
                              <path id="XMLID_55_" class="yellow" d="M33.2,13l0.2,0.3c0.2,0.2,0.6,0.3,0.8,0.1l5.3-4.5c0.2-0.2,0.3-0.6,0.1-0.8l-0.2-0.3 c-0.2-0.2-0.6-0.3-0.8-0.1l-5.3,4.5C33,12.4,33,12.7,33.2,13z"/>
                              <path id="XMLID_54_" class="yellow" d="M11.4,13.2l0.2-0.3c0.2-0.2,0.2-0.6-0.1-0.8L6.3,7.6C6.1,7.4,5.7,7.5,5.5,7.7L5.3,7.9 C5.1,8.2,5.1,8.5,5.4,8.7l5.3,4.5C10.9,13.5,11.2,13.5,11.4,13.2z"/>
                              <path id="XMLID_53_" class="yellow" d="M33.2,31.9l0.2-0.3c0.2-0.2,0.6-0.3,0.8-0.1l5.3,4.5c0.2,0.2,0.3,0.6,0.1,0.8l-0.2,0.3 c-0.2,0.2-0.6,0.3-0.8,0.1l-5.3-4.5C33,32.5,33,32.1,33.2,31.9z"/>
                              <animate attributeType="CSS"
                                 attributeName="opacity"
                                 attributeType="XML"
                                 dur="0.5s"
                                 keyTimes="0;0.5;1"
                                 repeatCount="indefinite"
                                 values="1;0.6;1"
                                 calcMode="linear"/>
                           </g>
                        </g>
                     </svg>
                  </div>
               </div>
            </div>
         </div>
      </a>
   </li>
</ul>