Сергей delphinpro

<div class="person">
  <img class="person__photo" src="">
  <div class="person__wrapper">
    <div class="person__name">Имя фамилия</div>
    <div class="person__position">Должность</div>
  </div>
</div>

.person {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.person__photo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  flex-shrink: 0;
}
.person__wrapper {
  display: grid;
  gap: 0.25rem;
}
.person__name {}
.person__position {}

function CLICK() {
  let button = document.querySelectorAll('button');
  if(button.length){ 
    for (let i = 0; i < button.length; i++){
+     if (!button[i].classList.contains('ok'))
+       button[i].classList.add('ok');
        button[i].addEventListener('click', function(EVENT){
          console.log(1,button[i]);
        });
+     }
    }
  }
}
CLICK();

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>

function getCurrentOffset(s) {
  return s.split(",", 2).map((n) => Number(n.replace(/\D/g, "")));
}
function right2_m() {
  const box = document.getElementById("box");
  let [left, top] = getCurrentOffset(box.style.transform);
  box.style.transform = `translate(${left+30}px,${top}px)`;
}
function bottom2_m() {
  const box = document.getElementById("box");
  let [left, top] = getCurrentOffset(box.style.transform);
  box.style.transform = `translate(${left}px,${top+30}px)`;
}

<div class="row">
        <div class="col-lg-4">video</div>
        <div class="col-lg-4">video</div>
        <div class="col-lg-4">video</div>
        <div class="col-lg-4">video</div>
        <div class="col-lg-4">video</div>
        <div class="col-lg-4">video</div>
</div>

<?php

header('Content-Type: text/javascript');

echo 'alert("boom")';

<table class="table">
    <tr>
        <td class="moccasin" colspan="2">&nbsp;</th>
        <td class="greenyellow">&nbsp;</th>
    </tr>
    <tr>
        <td class="moccasin" rowspan="2">&nbsp;</td>
        <td class="cyan" colspan="2"></td>
    </tr>
    <tr>
        <td class="cyan">&nbsp;</td>
        <td class="greenyellow">&nbsp;</td>
    </tr>
</table>
<style>
.table {
  width: 300px;
  height: 300px;
  border-spacing: 5px;
  border-collapse: separate;
  border: none;
}
.table td {
  width: 33%;
  height: 33%;
}
.moccasin {
  background: moccasin;
}
.greenyellow {
  background: greenyellow;
}
.cyan {
  background: cyan;
}
</style>

размер отступа между кнопками, должен зависеть не только от ширина браузера, но и от размеров самих кнопок

.block {
  --btn-width: 10vw;
  --gap: 1.25vw;
  background: red;
  padding: var(--gap);
  display: inline-flex;
  box-sizing: border-box;
  gap: var(--gap);
}


button {
    width: var(--btn-width);
    height: var(--btn-width);
    margin: 0;
    flex-shrink: 0;
}

const els = [
    ["author", "Author - "],
    ["name", "Name"],
    ["currentTime", "00:00"],
    ["duration", "00:00"],
];

els.forEach(el => {
    titleElement.appendChild(
        create({
            el: "span",
            className: el[0],
            text: el[1],
        })
    );
})

const els = [
    { el: "span", className: "author",      text: "Author - " },
    { el: "span", className: "name",        text: "Name" },
    { el: "span", className: "currentTime", text: "00:00" },
    { el: "span", className: "duration",    text: "00:00" },
];

els.forEach( el => titleElement.appendChild( create(el) ) );

function renderTitle (d) {
 return `
  <div class="title">
    <span class="currentTime">${d.time}</span>
    <span class="author">${d.author}</span> –
    <span class="name">${d.name}</span>
    <span class="duration">${d.duration}</span>
  </div>
  `;
}
xxx.insertAdjacentHTML('beforeend', renderTitle({
  author:   'Author - ',
  name:     'Name',
  time:     '00:00',
  duration: '00:00',
}));

a b b a
a b b a
a b b a
a b b a
c c d d

2fr 1fr 1fr 2fr