scss

$legend-background-color: $color-grey-09;
 
  
 
@mixin legend-box {
  margin: 10px;
  background-color: $legend-background-color;
  opacity: 0.8;
  border-radius: 3px;
  color: $color-grey-01;
  font-size: 14px;
  line-height: 19px;
  padding: 7px;
}
 
  
 
@mixin legend-value {
  margin-left: auto;
  margin-right: 10px;
}
 
.legend-container {
  margin-bottom: 30px;
 
  .distance-legends {
 
    @include legend-box;
 
    .optimized-voyage, .distance-travelled, .distance-to-go {
 
      display: grid
      grid-template-columns: 1fr 1fr;
 
      label {
        text-align: left;
      }
 
      img {
        @include legend-value;
      }
 
    }
 
  }
 
  
 
  .loading-condition-legends {
 
    @include legend-box;
 
    .ballast-loading, .laden-loading, .partial-laden-loading {
      display: grid;
      grid-template-columns: 1fr 1fr;
      label {
        text-align: left;
      }
 
      img {
        @include legend-value;
      }
    }
  }
}
 
  
 
.lat-lng-container {
  @include legend-box;
}
 

To bring element to bottom or change order use: order: 1; // example