JSFiddle - React, Tailwind, and code Playground

by Pavel Kityan

HTML

<div id="container">
<div id="top">Одна строчка</div>
<div id="main">
<a href="#" id="link2">Две строчки</a>, <a href="#" id="link1">Одна строчка </a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue mi ac felis posuere tempor. Vestibulum elit nunc, placerat nec gravida ut, aliquam ac elit. Morbi vulputate faucibus velit id tempor. Ut pretium tristique augue, a mollis leo semper in. Curabitur lobortis, nunc luctus dictum porttitor, lorem risus lacinia urna, vitae tempor sem orci quis lorem. Praesent laoreet tortor at tellus mattis venenatis. Phasellus sed tincidunt neque. Quisque tempus scelerisque nisl. Nunc ullamcorper ante vel faucibus varius. Pellentesque pulvinar tortor mi, eu porta leo blandit viverra. Nam tristique, odio id iaculis sagittis, urna orci rhoncus metus, id imperdiet massa tortor vel erat. Nullam tempor tortor eget tristique ultrices.</p>
<p>Nulla nec lectus sed eros pellentesque tempus. Aenean posuere hendrerit mi id commodo. Fusce eu fringilla est, quis imperdiet augue. Donec gravida consectetur ante, quis mollis justo consequat in. Suspendisse at quam in lorem dapibus tristique. Pellentesque euismod libero ipsum, sollicitudin elementum arcu pretium sit amet. Vivamus vehicula turpis nec sem fringilla eleifend. Suspendisse sollicitudin erat leo, non convallis lacus pharetra ac. Praesent ornare elementum magna, non facilisis mi sagittis et.</p><p>Vestibulum egestas, est et ullamcorper faucibus, enim purus accumsan risus, at rhoncus arcu neque molestie nunc. In hac habitasse platea dictumst. Sed eu nisi eget enim tincidunt tempus dignissim sit amet dolor. Pellentesque erat nisl, interdum eu blandit a, venenatis commodo risus. Fusce et elit nec felis porta interdum. Curabitur aliquam sem ut pharetra porttitor. Suspendisse nec orci ut nisi gravida consectetur ut a nulla. Nunc placerat nulla mauris, et tempor lacus dapibus et.</p><p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos....

CSS

/* основное: */

	#container {height: 400px; width: 500px;}
	#top {font-size: 30px; background: red;}
	#btm {font-size: 40px; background: orange;}
	#main {overflow: auto; background: pink;}
	#main p {margin-top: 20px; margin-bottom: 20px;}

JavaScript

function resizeTxt()
{
    var parentHeight = $('#main').parent().height(); 
	var headerHeight = $('#top').height();
	var btmHeight = $('#btm').height();
	$('#main').css('height', (parentHeight - headerHeight - btmHeight) + 'px');
}
			
$('#link1').on('click', 
    function(e)
    {
        e.preventDefault(); 
        $('#top').html('Одна строчка'); 
        $('#btm').html('Одна строчка'); 
        resizeTxt();
    });

$('#link2').on('click', 
    function(e)
    {
        e.preventDefault(); 
        $('#top').html('Две<br> строчки'); 
        $('#btm').html('Две<br> строчки'); 
        resizeTxt();
    });
			
resizeTxt();