How to animate a block shift when a block appears nearby?

Question

css

There is a block (display:table-cell;vertical-align:middle;) which is located inside a block with display: table;

When you click on the button inside the block, a block of text appears below (display:none -> display:block), the block on top is shifted from the center to the top of the page. Together with the text, they remain centered.

JQUERY code

$('.more1').click(function(){
  $('.mt1').toggleClass('open', 500, "easeOutSine"); //класс на кнопке
  $('.more_text1').addClass('animated slideInUp'); //анимация появления текста (animated.css)
  $('.more_text1').fadeToggle(500);	//появление блока текстового
});

For example, here is something similar https://codepen.io/anon/pen/BYdLMq . When you press the button, the button expands instantly, how is it done smoothly?

Answer 1

remember that through css animation plus block\non display, the transition will not work, it will only work with caution. Through the script it is possible to set a smooth appearance, but it also, as far as I know, does not work very well.
$(".element").fadeOut(300, function(){$(this).removeClass("open", 300)});

Answer 2

Transition width 0.5s linear

Answer 3

.gallery{
        width: 100px;				
        opacity: 0;
        transition: all 2s;	/*  all-что именно меняется, 2s-скорость в секундах  */	
}

.gallery-1{
        width: 300px;				
        opacity: 0;	
}