Wyrównanie bloków

Mam problem. Jak ustawić blok z czterema zdjęciami które są obok drugiego zdjęcia. Panel z tymi zdjęciami jest niższy od tego zdjęcia obok. Próbowałem z table i table cell i nie działa

Po pierwsze - nie baw się w żadne tabelki, nie jesteśmy na początku lat 90-tych.

Po drugie - napisz proszę dokładniej, co chcesz uzyskać, bo szczerze mówiąc rzuciłeś jakieś 2 zdania, z których za wiele nie wynika :P

Zapoznaj się z pojęciami rwd, grid, flexbox.

Mam panel na którym są cztery zdjęcia (zresztą wrzuciłem zdjęcie w poście można pobrać) i obok niego mam zdjęcie na którym są przyciski. I po prostu panel z tymi czterema zdjęciami powinien mieć wysokość zdjęcia które jest obok tego panelu. Wrzuce zdjęcie jak to powinno wyglądać. Wyżej wrzuciłem jak to wygląda u mnie

O coś takiego chodzi? https://jsfiddle.net/oahq6kvr/2/

UPDATE: Wkleję kod do posta, żeby innym łatwiej było przeglądać, jeśli kiedyś będą potrzebować i tu przypadkiem zajrzą:

HTML

<table class="sample-table">
  <tr>
    <td>
      <div class="square--small"></div>
    </td>
    <td>
      <div class="square--small"></div>
    </td>
    <td colspan="2" rowspan="2">
      <div class="square--big"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="square--small"></div>
    </td>
    <td>
      <div class="square--small"></div>
    </td>
  </tr>
</table>

CSS:

.sample-table {
  background: orange;
}

.square--big {
  background-color: blue;
  height: 250px;
  width: 250px;
}

.square--small {
  background-color: red;
  height: 100px;
  width: 100px;
}

Odpowiedź na komentarz: zrobiłem przykłady dla grida oraz flexboksa. HTML jest innych niż dla powyższych tabeli, ale wspólny dla grida i flexboksa.

HTML:

<div class="container">
  <div class="square-container--small">
    <div class="square--small"></div>
    <div class="square--small"></div>
    <div class="square--small"></div>
    <div class="square--small"></div>
  </div>
  <div class="square-container--big">
    <div class="square--big"></div>
  </div>
</div>

CSS Grid

https://jsfiddle.net/p6c40m37/

Bez rozjeżdżania się pionowego (w poziomie elementy mogą się rozjeżdżać, ale to można łatwo zmienić, jeśli Ci przeszkadza).

CSS:

.container {
  background-color: orange;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: auto auto;
}

.square-container--small {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: auto auto;
  align-content: start;
  grid-row-gap: 10px;
}

.square--big {
  background-color: blue;
  height: 300px;
  width: 300px;
}

.square--small {
  background-color: red;
  height: 100px;
  width: 100px;
}

CSS Flexbox

https://jsfiddle.net/Lp9urj30/2/

Rozjeżdżanie, hm... zależy, co przez to rozumiesz; ja powiedziałbym, że nie ma.

CSS:

.container {
  background-color: orange;
  display: flex;
}

.square-container--small {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.square--big {
  background-color: blue;
  height: 300px;
  width: 300px;
}

.square--small {
  background-color: red;
  height: 100px;
  width: 100px;
  margin: 10px;
}