Right sidebar next to highlights

Question

I want to get a sidebar next to the highlights images at the right.

How can I get this?

I've tried many things but can't get it working sadly. Float doesn't work since the highlights images are floating out of the layout.

Code:

HTML:

<div class="wrapper">
<a href="article.html">
<div class="big-one">
<p class="test8">
AJAX DOOR NAAR DE FINALE
</p>
</div>
</a>

<a href="#">
<div class="small-one">
<p> 
Ajax wint van Feyenoord
</p>
</div>
</a>

<a href="#">
<div class="small-two">
<p>
LIVE: Ajax komt op 1-0
</p>
</div>
</a>
</div>

CSS:

.wrapper div {
  display: inline-table;
  }

/* Large image */
.big-one {
  float: left;
  text-align: center;
  color: white;
  font-size: 24px;
  width: 70%;
  height: 300px;
  background-image: url('http://private.teunstrik.com/blog/wp-content/uploads/2017/05/Schermafbeelding-2017-05-13-om-16.46.11-1024x498.png'); 
   background-size: cover;
}

/* Small image */
.small-one {
  text-align: center;
  color:white;
  width: 30%;
  height: 150px;
  background-image: url('http://private.teunstrik.com/blog/wp-content/uploads/2017/05/Schermafbeelding-2017-05-13-om-16.48.31-1024x539.png');
  background-size: cover; 
}

/* Small image */
.small-two {
  text-align: center;
  color:white;
  width: 30%;
  height: 150px;
  background-image: url('http://private.teunstrik.com/blog/wp-content/uploads/2017/05/Schermafbeelding-2017-05-13-om-16.58.38-1024x577.png'); 
  background-size: cover;
}

Things I've tried were like this:

.wrapper {
    margin: 0 auto;
    padding-top: 64px;
    max-width: 940px;
    width: 94%;
    float:left;
}

#sidebar {
  float:right;
  padding:5px;
}

But that's printing out like this: http://private.teunstrik.com/blog/wp-content/uploads/2017/05/Schermafbeelding-2017-05-14-om-13.32.25-1024x325.png

Thanks