JSFiddle - React, Tailwind, and code Playground

HTML

<body>

	<div id="a" style="display:block;">
    <div class="windows">

      <div class="dialog-header">
        <div style="display:table-cell;	vertical-align: middle; height:50px; width:700px;">ЗАКАЗ</div>
      </div>
      <div style="position: absolute; right:0px; top: 1px; background:url(close.png); width:48px; height:48px;" onclick="hideA();"></div>

      <div id="selectedphotoscount" style="display:table-cell;	vertical-align: middle;text-align:center;width:700px;height:60px;background:#eee; color:black;">
      Фотографий
      </div>


      <!-- Это основная часть - хотелось бы чтобы внутри высота этого блока была не фиксированной а менялась автоматически,
      в зависимости от Дополнительной строки ниже -->
      <div style="height:370px; overflow: auto;">
	      <div id="odd-warning" style="display:block; background:#FFA500;">
	        Необходимо выбрать четное количество фотографий!
	      </div>
	      <div id="payment-data" align="center">
	        <div style="display:inline-block; width:150px;height:150px;background:no-repeat url(http://scontent-b.cdninstagram.com/hphotos-xpa1/t51.2885-15/926548_686411601448109_1385508815_a.jpg)" id='0' onclick="select_paymentimage(this)"></div>
	        <div style="display:inline-block; width:150px;height:150px;background:no-repeat url(http://scontent-b.cdninstagram.com/hphotos-xpa1/t51.2885-15/926548_686411601448109_1385508815_a.jpg)" id='0' onclick="select_paymentimage(this)"></div>
	        <div style="display:inline-block; width:150px;height:150px;background:no-repeat url(http://scontent-b.cdninstagram.com/hphotos-xpa1/t51.2885-15/926548_686411601448109_1385508815_a.jpg)" id='0' onclick="select_paymentimage(this)"></div>
	        <div style="display:inline-block; width:150px;height:150px;background:no-repeat url(http://scontent-b.cdninstagram.com/hphotos-xpa1/t51.2885-15/926548_686411601448109_1385508815_a.jpg)" id='0' onclick="select_paymentimage(this)"></div>
	        <div style="display:inline-block;...

CSS

html, body {
	margin:0;
	padding:0;
	font-size:30px;
	color:#000;
	font-family:Tahoma;
	height:100%;
	overflow: hidden;
}


/* Диалоговые окна */
#a {
	position:fixed;
	z-index:3;
	display:none;
	left:0px;
	top:0px;
	width: 700px;
	height: 700px;
	background:#eee;

	border:1px solid black;

}

.windows {
	margin: 50px 0 84px 0;
	/*padding:5px;
	padding-top:60px;
	width: 700px;
	height: 600px;     */
	/*border: 2px solid red;*/
}

.dialog-header {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:50px;
	background:#646464;
	/*border-radius:10px 10px 0px 0px;
	padding:10px;*/
	color:white;
	text-align:center;
}

.dialog-bottom {
	position:absolute;
	bottom:0px;
	left:0px;
	width:100%;
	height:84px;
	background:#646464;
	/*border-radius:0px 0px 10px 10px;
	padding:10px; */
}