Sub divs do not show button inline - css

Question

I have the following movie element:
And this is the corresponding HTML:
<div class="bottom d-flex">
<div class="video-controls time-segment p-2">
<button class="btn-control btn-"><span class="fa fa-undo"></span></button>
<button class="btn-control btn-step-backward"><span
class="fa fa-step-backward"></span></button>
<button *ngIf="!widget.moviePlaying" class="btn-control btn-play" (click)="playPauseMovie(widget)"><span class="fa fa-play"></span></button>
<button *ngIf="widget.moviePlaying" class="btn-control btn-pause" (click)="playPauseMovie(widget)"><span class="fa fa-pause"></span></button>
<button class="btn-control btn-step-forward"><span
class="fa fa-step-forward"></span></button>
<button class="btn-control btn-reset" hidden><span class="fa fa-undo"></span></button>
</div>
<div id="frames-indicator">
<span id="seekBarLabel">Frame {{ moviesFrames.current }}/{{ moviesFrames.total }}</span>
</div>
<div class="widget-controls ml-auto">
<button class="btn-control btn-play" (click)="setSize(widget, 1, $event, gridster1)"><span
class="fa fa-clone"></span></button>
<button *ngIf="!widget.linked" class="btn-control btn-" (click)="toggleLinked(widget)"><span
class="fa fa-chain-broken"></span></button>
<button *ngIf="widget.linked" class="btn-control btn-step-backward" (click)="toggleLinked(widget)"><span class="fa fa-link"></span></button>
<button class="btn-control btn-play" (click)="setSize(widget, -1, $event, gridster1)"><span
class="fa fa-minus"></span></button>
<button class="btn-control btn-play" (click)="setSize(widget, 1, $event, gridster1)"><span
class="fa fa-plus"></span></button>
</div>
</div>
As you can see:
div container has class="bottom d-flex"
div 1 has class class="video-controls time-segment p-2" and host buttons
div 2 just contain a span element
div 3 is right aligned and host buttons
I want div 1 and 3 to 'expand their width to display all buttons inline. I have tried width: max-content with no luck.
Any idea in how to achieve my goal?
SOLUTION
Thank you to everyone for trying to help. In the end I did not need to manipulate the CSS. The media breakpoint settings were wrong. I was generated the same number of movies per line in medium and large screens. On Medium screens the movies were too narrow causing the icons to stack vertically.

Answer 1

Posting my own solution in case might help someone.
Thank you to everyone for trying to help. In the end I did not need to manipulate the CSS. The media breakpoint settings were wrong. I was generated the same number of movies per line in medium and large screens. On Medium screens the movies were too narrow causing the icons to stack vertically.