Jak ustawić bloki z opiniami jeden pod drugim?

Question

Witam. Jestem osobą początkującą w zakresie HTML i CSS. Aby rozwinąć swoje możliwości wykonuję ostatnio zadania egzaminacyjne, a obecnie przerabiam zadania egzaminacyjne EE.09., tylko że bez skryptów i robię je tylko za pomocą HTML i CSS. Zrobiłem już wszystko, oprócz środka na którym miały się znajdować dwa bloki z opiniami. Niestety całość mi się rozwala, wraz nawet ze stopką. Jakiego polecenia mam użyć aby wszystko było składne? Dodatkowo imiona w opinii są wyśrodkowane u góry a nie są po lewej stronie obok zdjęcia. Czy trzeba coś zrobić w HTML czy CSS? Dodatkowo przesyłam treść kodu z opiniami w HTML/CSS.

Z góry bardzo dziękuję za odpowiedź. Mam nadzieję że wszystko dobrze wytłumaczyłem ;)

Najpierw CSS, a następnie dwa HTML-e.

.opinie{
	background: white;
	color: dimgray;
	width: 60%;
	height: 220px;
	margin: 40px auto;
	box-shadow: 0 0 10px 5px dimgray;
}

<div class="opinie">
        <div class="opinia1">
            <img src="jacek.jpg" alt="Zdjęcie 1">
            <div class="info">
                <h1>Jacek</h1>
                <p>Polecam to miejsce każdemu!</p>
	</div>

<div class="opinie">
        <div class="opinia2">
            <img src="zbigniew.jpg" alt="Zdjęcie 2">
            <div class="info">
                <h2>Zbigniew</h2>
                <p>Miła obsługa i BHP!</p>
    </div>

 

Answer 1

Nie "zamknąłeś" div-ów

.opinie{
    background: white;
    color: dimgray;
    width: 60%;
    height: 220px;
    margin: 40px auto;
    box-shadow: 0 0 10px 5px dimgray;
}

<div class="opinie">
  <div class="opinia1">
    <img src="jacek.jpg" alt="Zdjęcie 1">
    <div class="info">
      <h1>Jacek</h1>
      <p>Polecam to miejsce każdemu!</p>
    </div>
  </div>
</div>

<div class="opinie">
  <div class="opinia2">
    <img src="zbigniew.jpg" alt="Zdjęcie 2">
    <div class="info">
      <h2>Zbigniew</h2>
      <p>Miła obsługa i BHP!</p>
    </div>
  </div>
</div>