Although I have searched for a similar solution, I haven't found an exact scenario that matches my current issue. Here is the problem: I have a div on the right (with a fixed width), and the entire left side is occupied by another div. While I can position both divs correctly, the contents of the second one are displaying below the first div. Despite trying various configurations, I have not had any success in resolving this issue. It may seem like a trivial question, but I would greatly appreciate any assistance you can offer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div>
<div style="display: inline-block; width:100%; display: inline-block;">
<div id="sidemenu" style="background-color: #004E87; position: fixed; width: 100px; height: 100%; float:left; display: inline-block;">
</div>
<div id="leftside" style="width: 100%; float:right; background-color: yellow; display: inline-block;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>
Updated with flex!
My current issue is achieving full screen height. Any suggestions?
<div class="flex-container" style="display: flex; width: 100%; background-color: green; align-items: stretch;">
<div class="flex-item" style="background-color: yellow; width: 100px; height: 100%;">1</div>
<div class="flex-item" style="background-color: red; width: 100px;">2</div>
</div>
I am grateful for any support you can provide.