таблица объединяется с видео при увеличении Chrome

Question

У меня есть таблица в левой части страницы и видео в середине. Когда я увеличиваю Chrome, он сливается и портится. Я приложил 2 фотографии, чтобы вы могли понять, что я имею в виду.

table {
text-align: left;
line-height: 40px;
border-collapse: separate;
border-spacing: 0;
width: 600px;
height: 220px;
border-bottom: 1px solid rgba(189, 193, 200, 0.5);
border-left: 1px solid rgba(189, 193, 200, 0.5);
border-right: 1px solid rgba(189, 193, 200, 0.5);
border-radius: 20px;
}

Я пытался position: absolute;, кажется, не исправить.

Answer 1

Есть миллион способов достичь этого, один из них - flexbox.

.container {
  display: flex;
}

.player, .table-container {
  display: flex;
  flex-grow: 1;
}

table {
text-align: left;
line-height: 40px;
border-collapse: separate;
border-spacing: 0;
max-width: 600px;
height: 220px;
border-bottom: 1px solid rgba(189, 193, 200, 0.5);
border-left: 1px solid rgba(189, 193, 200, 0.5);
border-right: 1px solid rgba(189, 193, 200, 0.5);
border-radius: 20px;
margin-right: 20px;
width: 100%;
}

https://jsfiddle.net/eq0sdvgh/1/