I want to place elements in this order, i.e. all on one line enter image description here

Each picture should be indented from the left / right edge by 40px from the main content

HTML

<div id="block2"> <img src="img/smmini.png"> <h1>Заслуженный герой<br><p>Советского союза<p></h1> <img src="img/smmini.png"> </div>

    1 answer 1

     * { padding: 0; margin: 0; box-sizing: border-box; } #block2 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; padding: 0 40px; } h1 > span { display: block; } img { background: #ccc; width: 100px; height: 100px; } 
     <div id="block2"> <img src="img/smmini.png"> <h1>Заслуженный герой <span>Советского союза</span> </h1> <img src="img/smmini.png"> </div>