Trying to create a single line clickable section with a play button, text, and YouTube video thumbnail. It's not rendering correctly even though the container is set as flex with row direction.
Custom play button and properly sized thumbnail are in place, but they refuse to align on the same line. Is there something missing here?
If the play button is commented out, the text and thumbnail do display on the same row successfully.
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>