I have encountered numerous posts on this topic, but none of the solutions provided have worked for me. I must admit that I struggle to grasp CSS concepts, although I am making an effort to learn.
Here is the code I am currently using:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Question Form Modal</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<style>
.QuestionFormLeft {
background-color:white;
}
.QuestionFormRight {
padding-top: 0;
background-color:#DBDDDE;
height: 100%;
}
.QuestionFormRight p:first-child {
margin-top: 20px;
}
.QuestionFormRow {
border-bottom: 3px solid #DBDDDE;
}
</style>
<div class="container-fluid">
<div class="row QuestionFormRow">
<div class="col-sm-4 QuestionFormLeft">
<h4>Question 1 Title</h4>
<p>Some words and description. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-sm-8 QuestionFormRight">
<p>Please select an option from below:</p>
<select>
<option>Awesomeness</option>
<option>Greatness</option>
</select>
</div>
</div>
<div class="row QuestionFormRow">
<div class="col-sm-4 QuestionFormLeft">
<h4>Question 2 Title</h4>
<p>Some words and description. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-sm-8 QuestionFormRight">
<p>Please select an option from below:</p>
<select>
<option>Awesomeness</option>
<option>Greatness</option>
</select>
</div>
</div>
</div>
</body>
</html>
Link to code on JSFiddle: https://jsfiddle.net/dwzndscm/
I am seeking assistance on how to make the Right DIV QuestionFormRight fill the background with 100% height. It is important to note that the page width automatically adjusts, so stacking left to right is preferred over top to bottom.
While I could easily achieve this with a table, I am trying to avoid taking that route. Any help or guidance on this matter would be highly appreciated.