Artist - title stick out div in mobile view media queries

Question

I have a dynamic audio player with artist and title. It works fine but on mobile view, artist and title stick out my div.

Here is a picture:

I'd like artist - title (when longer that user's screen) display just a line below.

I already tested by changing display, overflow-text, word-break…

Here is my code:

@media screen and (orientation: portrait) and (max-width: 750px) {
  .titrage { display: inline-grid; }
  }

<div class='titrage'>
  <div class='now'>Your are listening <img class='cover' src="cover.png" alt='audio-cover'> : </div>
  <div class='artist'>Loading </div>
   <div class='separator'>-</div>
   <div class='title'>...</div>
</div>

Answer 1

Changing the divs to use display: inline-block; instead of inline grid will change the divs layout behavior.

Here is a link from MDN with more details on block and inline layout flow.

Right now with inline-grid each div is taking up a full row, regardless of its content's size, changing to inline-block will make each div take up roughly the amount of size that its content requires, resulting in them displaying on the same line if they can fit, demonstrated in code snippet below:

  
  .titrage, .now, .artist, .separator, .title { display: inline-block; }
  

  

  <div class='titrage'>
  <div class='now'>Your are listening <img class='cover' src="cover.png" alt='audio-cover'> : </div>
  <div class='artist'>Loading </div>
  <div class='separator'>-</div>
  <div class='title'>...</div>
</div>

This question about making divs layout on the same line is directly related.

Also this question about preferred line break points seems tangentially related.

Answer 2

Use flex maybe? This should work fine without media queries. Or can with media queries too.

.titrage {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.pad {
  padding: 10px;
}

<div class='titrage'>
  <div class='now'>
    <img class='cover' src="https://via.placeholder.com/75" alt='audio-cover'>
  </div>
  <div class="pad">
    <span>You are Listening :</span>
    <span class='artist'>Bee Gees </span>
    <span class='separator'>-</span>
    <span class='title'>Stayin' Alive (1977)</span>
  </div>
</div>

Answer 3

Thanks for answering ;)

I finally found a solution. I just put artist - title a line below 'You are listening'.

On .titrage a display: block. On .now a display: fixed. And on a new div .now (including .artist, .separator and .title) a display: flex

It's working for me :p