enter image description here

There is such a block, but for some reason, where there is one, the height of the block does not change, I specifically removed the height there, but the problem did not dare.

These are completely two different blocks that follow each other.

It is necessary that the block with the figure automatically occupy the entire height of the open block.

Like this : enter image description here

CODE:

function show(id) { var div = document.getElementById(id); if (div.style.display == 'block') { div.style.display = 'none'; toggler.innerHTML = '+'; } else { div.style.display = 'block'; toggler.innerHTML = '-'; } } 
 .FunctionalBlock { width: 1170px; background-color: #f4f4f4; margin-bottom: 20px; } .FunctionalBlock .Numeric { width: 100px; align-content: stretch; background-color: #dadada; box-sizing: border-box; float: left; text-align: center; font-size: 40px; line-height: 100px; color: black; } .FunctionalBlock .MainDesc { text-align: left; font-size: 40px; line-height: 101px; color: black; margin-left: 130px; } .FunctionalBlock .HideDesk { display: none; } .FunctionalBlock .OpenClose { float: right; margin-right: 20px; } 
 <div class="FunctionalBlock"> <div class="Numeric">1</div> <div class="MainDesc"> Decription <a class="OpenClose" onclick="show('Decription');">+</a> <div class="HideDesk" id="Decription"> Lorem Ipsum is simply dummy text of the pirnting and typesetting inclustry <img src="preview/img/"> </div> </div> </div>

1 answer 1

Remove the float and align-content from the .FunctionalBlock .Numeric selector, and the parent, i.e. .FunctionalBlock , set display: flex; . And do not write class names with a capital letter :)