I'm working with this HTML file, attempting to create a two-column layout using HTML and CSS. I want one column to be labeled REQUEST and the other RESPONSE. When a value is entered in the text field in Column 1, it should display a response in Column 2.
Here's the style:
<style>
*{
box-sizing: border-box;
}
.column {
float: left;
width: 50%;
padding: 10px;
height: 450px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.row:after{
width: 900px;
}
.submitBtn
{
margin: 10px;
}
input{
align-self: center;
}
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
#sbtbtn
{
font-family:Verdana, Geneva, sans-serif;
cursor:pointer;
}
</style>
The HTML body section:
<div class="toolbar" role="banner">
<img src="https://www.amazonlogo.com/webstatic/en_US/i/buttons/AMZ_logo_h_100x26.png" alt="logo" />
<span>Welcome</span>
<div class="spacer"></div>
</div>
<div class="content" role="main">
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>REQUEST</h2>
<div>
<input type="text" [(ngModel)]="calId" placeholder="Enter CAL ID" class="user_id_text"/>
</div>
<div class="submitBtn">
<input id="sbtbtn" type="submit" (click)="getById(calId)" value="submit"/>
</div>
</div>
<div class="column" style="background-color:#bbb;">
<h2>RESPONSE</h2>
<div id="table">
<table width="100%" class="table">
<thead>
<tr>
<th>Component Name</th>
<th>API Name</th>
<th>Error Message</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let binary of data">
<td>{{binary.componentName}}</td>
<td>{{binary.apiName}}</td>
<td>{{binary.errorMessage}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
The resulting output from the above *.html code will look like Screenshot-1 below:
Screenshot-1:
https://i.sstatic.net/zLtr7.png
Upon entering a value into the text field and clicking the submit button, the view will change accordingly:
https://i.sstatic.net/krXLI.png
https://i.sstatic.net/18knB.png
Expected Result:
1. Aim for a two-column HTML layout without any background color.
2. Ensure that the text field and submit button are centered on column 1.
3. The results should neatly fit into column 2.
4. In case of expanding values, implement a sidebar within column 2 to display all data.
If you have experience with web design, assistance with achieving these goals would be greatly appreciated!
Note: This page is responsive and should function well across different devices.