Как растянуть элемент #code на оставшуюся ширину?
<!DOCTYPE html>
<html>
<head>
<title>Code Editor</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="panel">
</div>
<div class="tips">
<p>tips</p>
<hr>
</div>
<textarea id="code">
</textarea>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
body {
background: #202020;
}
.container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.panel {
width: 100%;
height: 5vh;
background: #2d2d2db2;
}
.tips {
width: 30%;
height: 100%;
background: #303030;
z-index: 100;
}
.tips p {
color: #202020;
padding: 1.5vh;
}
.tips hr {
background: #202020;
border: 1px solid #202020;
}
#code {
background: red;
width: 100%;
height: 100%;
}