JSFiddle - React, Tailwind, and code Playground
HTML
<div id="wrapperDiv">
<div id="div1">div1</div><!--
--><div id="div2">div2</div>
</div>
CSS
html, body {
margin: 0;
width: 100%;
height: 100%;
}
#wrapperDiv {
width: 100%;
height: 200px;
background-color: #C8BEB7;
}
#div1 {
display: inline-block;
width: 200px;
height: 100%;
background-color: #747474;
}
#div2 {
display: inline-block;
width: 500px;
height: 100%;
background-color: goldenrod;
}
JavaScript
function div2Resize() {
var div2 = document.getElementById('div2');
div2.style.width = window.innerWidth - 200 + 'px';
console.log('resize');
}
div2Resize();
// 브라우저 크기가 변할 시 동적으로 사이즈를 조절해야 하는경우
window.addEventListener('resize', div2Resize);