Custom icon and text in column when I set flex-direction as row?

October 5, 2022

I am trying to make a clickable section with a play button, some text and the thumbnail of the youtube video to play, all on one line.

I have managed to create my custom play button, I have my thumbnail correctly sized, but I can’t seem to get them all on one line for some reason, despite me putting the container as a flex with flex-direction: row.

Am I missing something here?

Note: If I comment out the play button, then the text and the thumbnail do live on the same row.

body {
  background: darkgrey;
}

.page-container {
  background: lightgrey;
  width: 320px;
  margin: auto auto;
  height: 600px;
}

.section-container {
  background: white;
  width: 288px;
  margin: auto auto;
  height: 500px;
}

.video-container {
  display: flex;
  flex-direction: row;
}

.video-thumbnail {
  background-image: url('https://i3.ytimg.com/vi/I-k-iTUMQAY/mqdefault.jpg');
  width: 71.63px;
  height: 40.14px; 
  background-size: 71.63px 40.14px;
}

/* Play button */
.play-button-outer {
  display: inline-block;
  box-sizing: border-box;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  background-color: rgba(0, 115, 144, 0.16);
  cursor: pointer;
}

.play-button-inner {
  margin: 0 auto;
  top: calc(50% - 6.645px);
  position: relative;  
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6.645px 0 6.645px 11.04px;
  border-color: transparent transparent transparent #007390;
}

<div class="page-container">
  <div class="section-container">
    <div class="video-container">
      <div class="play-button-outer">
        <div class="play-button-inner"/>
      </div>
      <div class="text">Some text</div>
      <div class="video-thumbnail"/>
    </div>
  </div>
</div>