Align 2 Boxes Verticaly With An Image Between

I am trying to align 3 boxes and 2 images.

2 boxes vertically with there is an img between

3rd box standing right of them with an arrow img pointing it like this:


This is what i tried:

Css:

.cont1 {
  display:flex;
  flex-direction:row;
}

.box{
  margin:0 auto;

  width: 80px;
  height: 80px;
  background: #8C8C8C;
border: solid 3px #8B0000;
}

  .burning{
    background-image : url("http://i.hizliresim.com/VDrvRy.gif");
    width: 350px;
  height: 250px;

  }

Code (markup):

Html:

<div>
<div className="box">
Box 2
</div>
<div  className="cont1">
<div className="burning">
</div>
<div> IMG2 </div>
<div className="box">Box 3</div>
</div>
<div className="box">
Box 1
</div>
</div>

Code (markup):

This is how it looks:



I also want to center them

 

Sorry that no one answered.

I would do something like this:
https://jsfiddle.net/xn24umah/

<div class="container">

    <div>
        <span>content 1</span>
    </div>
   
        <div>
            <div></div>
            <div></div>
            <div></div>
        </div>

    <div>
        <span>content3</span>
    </div>

</div>

HTML:

.container{
  margin:auto;
  width:800px;
  height: 400px;
  border: 1px solid #000;
}

.container div:nth-child(1){
  margin:auto;
  margin-top:10px;
  width:300px;
  height: 100px;
}
span{
  display: block;
padding-top:40px;
}
.container div:nth-child(1) + div{
  margin:auto;
  margin-top:10px;
  width:300px;
  height: 100px;
}
.container div:nth-child(1) + div + div{
  margin:auto;
  margin-top:10px;
  width:300px;
  height: 100px;
}
.container div:nth-child(1) + div div{
width: 50px;
height: 80px;
margin-right: 24px;
float:left;
border: 1px solid #000;
}

Code (CSS):