<div class="row" style="margin: 20px;">
            <div class="col-sm-10 col-sm-offset-1 col-xs-12 col-xs-offset-0">
                <div style="text-align: center; display: inline;">
                    <div class="columns">
                        <div class="twentytwenty-container">
                            <img  width="100%" id="beforeImg" src="img/projects/1_before.jpg" />
                            <img  width="100%" id="afterImg" src="img/projects/1_after.jpg" />
                        </div>
                    </div>
                    <img id="prevProject" src="img/left-arrow.png" width="25px" style="cursor: pointer; display: inline;"/>
                    ЛИСТАЙТЕ ПРОЕКТЫ
                    <img id="nextProject" src="img/right-arrow.png" width="25px" style="cursor: pointer; display: inline;"/>
                </div>
            </div>
        </div>

<div class="row" style="margin: 20px;">
            <div class="col-sm-10 col-sm-offset-1 col-xs-12 col-xs-offset-0">
                <div style="vertical-align: center;">
                    <img id="prevProject" src="img/left-arrow.png" width="25px" style="cursor: pointer; float: left;"/>
                    <img id="nextProject" src="img/right-arrow.png" width="25px" style="cursor: pointer; float: right;"/>
                    <div class="columns">
                        <div class="twentytwenty-container">
                            <img  width="100%" id="beforeImg" src="img/projects/1_before.jpg" />
                            <img  width="100%" id="afterImg" src="img/projects/1_after.jpg" />
                        </div>
                    </div>

                </div>
                <div style="clear:both;"></div>
            </div>
        </div>

display:inline-block;
vetrical-align:middle;

float:left;

div.clear{
        clear:both;
    }

#prevProject
    float:left;

#nextProject
    float:right;