<section>
    <h1>The Beasts</h1>

    <p>text here</p>

    <div class="flexbox">
        <div class="flexside">

            <figure class"beast"><img src="images/tonka.jpg" alt="Tonka, the old man." /></figure>
            <p>text here</p>

            <p>text here</p>
        </div>
        <div class="flexside">

            <figure class="beast2"><img src="images/storm.jpg" alt="Storm, our Gangster Princess" /></figure>
            <p>text here</p>

            <p>text here</p>
        </div>
        <div class="flexside">

            <figure class="beast"><img class="cats" src="images/banshee.jpg" alt="Deafbat aka Banshee" /></figure>

            <p>text here</p>

            <p>text here</p>

            <p>text here</p>
        </div>
        <div class="flexside">

            <figure class="beast2"><img class="cats" src="images/squiggle.jpg" alt="Mr Squiggle, the man from the Moon." /></figure>

            <p>text here</p>

            <p>text here</p>

            <p>text here</p>
        </div>
    </div>
    <img src="images/kittens.jpg" alt="The kittens, Rumple and Mungo." />
    <p>text here</p>

    <p>text here</p>

    <p>text here.</p>

    <p>text here</p>
</section>

.flexbox {
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
}

.flexside {
  width: 50%;
  display: inline-block;
}

p {
  padding-left: 20px;
  padding-right: 20px;
}

figure.beast {
  margin: auto;
  text-align: center;
}

figure.beast2 {
  display: block;
  margin: 0 auto;
}

img.cats {
  height: 233px;
  width: 350px;
}

.flexside {
    width: 50%;
    display: inline-flex;
    border: 1px solid;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

img {
   display: block;
   max-width: 100%;
}