Когда многие div становятся помехой?

Ваша структура не является неправильной, и проблем никогда не будет. Но вы можете использовать css-селекторы, чтобы создать чистую структуру в ваших html-тегах. Например, вы можете использовать это в своем файле css:

.route-information-container div:first-child {text-decoration: underline;}
.route-information-container div:last-child {color: red;}

В соответствии со стандартной практикой структура идеальна. Вы также можете получить вышеуказанную структуру, используя приведенный ниже код: https://jsfiddle.net/ulric_469/m5dvx2q7/7/

 <div class = "route-information-container__header">
  <div class = "route-information-container__name">DRONE ID ID </div>
  <div class = "route-information-container__battery">
    <mat-icon svgIcon = "<battery-></battery->90">Right Section</mat-icon>
  </div>
</div>
<img  class = "route-information-container__drone-logo" src = "./assets/images/drones/drone_front.jpg" width = "50px"/>
<div class= "bottom-section">
  <div class = "route-information-container__drone-name">DroneID</div>
  <div class = "route-information-container__drone-camera">CameraID</div>
</div>   


.route-information-container__header {
  display: flex;
  border: 1px solid black;
  justify-content: space-between;
}

.bottom-section {
  display: inline-block;
  vertical-align: top;
}