JSFiddle - React, Tailwind, and code Playground

HTML

<i class="helper"></i><!--
--><div class="wrapper">
<img class="block" src="http://free-pc.ru/images/podp_str/header.png" alt="" />
<img class="block ofst" src="http://free-pc.ru/images/podp_str/body.png" alt="" />
</div>

CSS

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    width: 100%;
    margin: 0;
    padding: 0;

    background: url(http://free-pc.ru/images/podp_str/fon_1920_1178.jpg) no-repeat;
}

.helper {
    display: inline-block;
    width: 0;
    height: 100%;

    vertical-align: middle;

    background-color: #00f;
}

.wrapper {
    display: inline-block;
    width: 100%;
    margin-top: -60px;

    vertical-align: middle;
}

@media screen and (max-width: 700px) {
    .wrapper {
        margin-top: -8.571428%;
    }
}

.block {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

.ofst {
    padding: 0 7.142857%;
}