There is innerBlock2 , in it the text. When it moves to the next line, you need to put it in the right side and remove the margin .

 body { margin: 0; } #block { display: flex; flex-wrap: wrap; width: 100%; } #innerBlock2 { margin-top: 20vh; } #innerBlock { width: 500px; height: 100vh; background: #000; } 
 <div id="block"> <div id="innerBlock"></div> <div id="innerBlock2"> <h4>lorem</h4> <h4>lorem</h4> </div> </div>

    2 answers 2

    In CSS for the block #innerBlock2 add a new rule: flex-grow: 1;

    Javascript:

     window.addEventListener('resize', function() { var mainBlock = document.getElementById('block'), innerBlock2 = document.getElementById('innerBlock2'); if (mainBlock.clientWidth === innerBlock2.clientWidth) { mainBlock.style.justifyContent = 'flex-end'; innerBlock2.style.marginTop = 0; innerBlock2.style.maxWidth = '200px'; } });

      So?

       body { margin: 0; } #block { display: flex; flex-wrap: wrap; width: 100%; } #innerBlock2 { margin-top: 20vh; display: flex; } #innerBlock { width: 500px; height: 100vh; background: #000; } #innerBlock2 h4:nth-child(2) { margin-top: 0; } 
       <div id="block"> <div id="innerBlock"></div> <div id="innerBlock2"> <h4>lorem</h4> <h4>lorem</h4> </div> </div>