CSS - transform divs pushing other divs around - html

Question

I'm trying to do a thumbnail page with a hover transition that zooms and displays a description. EDIT: I do not want to use jquery.
Problem 1. The hovered div pushes the neighbor div out of alignment. All the thumbs should stay in nice neat rows.
Problem 2. The hovered div pushes the bottom of the container down.
.container {
margin-top: 75px;
text-align: center;
border: 2px solid black;
padding: 5px;
}
.tn-wrapper {
display: inline-block;
position: relative;
border: 0;
margin: 5px;
height: 150px;
overflow: hidden;
transition: all 200ms ease-in;
transform: scale(1);
}
.tn-wrapper:hover {
z-index: 1;
transition: all 200ms ease-in;
transform: scale(1.5);
height: 300px;
}
.thumb-box {
background: lightgray;
height: 150px;
width: 150px;
}
.descr-box {
background: gray;
height: 150px;
width: 150px;
}
<div class="container">
<div class="tn-wrapper">
<div class="thumb-box">
Thumb
</div>
<div class="descr-box">
Description
</div>
</div>
<div class="tn-wrapper">
<div class="thumb-box">
Thumb
</div>
<div class="descr-box">
Description
</div>
</div>
</div>

Answer 1

You can update your code like below. You fix the alignment of the inline-block elements (not mandatory but to make sure they will stay at the top) and you adjust the height of the description instead of the parent element.
.container {
margin-top: 75px;
text-align: center;
border: 2px solid black;
padding: 5px;
}
.tn-wrapper {
display: inline-block;
position: relative;
border: 0;
margin: 5px;
height: 150px;
transition: all 200ms ease-in;
transform: scale(1);
vertical-align:top; /* added */
}
.tn-wrapper:hover {
z-index: 1;
transition: all 200ms ease-in;
transform: scale(1.5);
}
.thumb-box {
background: lightgray;
height: 150px;
width: 150px;
}
.descr-box {
background: gray;
height: 0;
width: 150px;
overflow:hidden;
transition: all 200ms ease-in;
}
.tn-wrapper:hover .descr-box{
height: 150px;
}
<div class="container">
<div class="tn-wrapper">
<div class="thumb-box">
Thumb
</div>
<div class="descr-box">
Description
</div>
</div>
<div class="tn-wrapper">
<div class="thumb-box">
Thumb
</div>
<div class="descr-box">
Description
</div>
</div>
</div>

Answer 2

I'm not sure if this is the desired look you're trying to achieve but check out this example
I've added a flexbox to your container, changed your transform-origin and utilized the appropriate margins to keep your spacing.
.container {
margin-top: 75px;
text-align: center;
border: 2px solid black;
padding: 5px;
display:flex;
justify-content:center;
}
.tn-wrapper {
display: inline-block;
position: relative;
border: 0;
margin: 5px;
height: 150px;
transition: all 200ms ease-in;
transform: scale(1);
transform-origin:top;
}
.tn-wrapper:hover {
z-index: 1;
transition: all 200ms ease-in;
transform-origin:top;
transform: scale(1.5);
margin:5px 43px 305px 43px;
}