无法将动态数据显示到column2 HTML布局中，并且HTML中的对齐方式看起来不好

我有下面的HTML文件，并试图创建两列布局使用HTML和CSS和一列我想作为请求，另一个是响应列。当我在第1列的文本字段中输入值时，它应该在第2列的响应中返回response

风格：

<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>

*{
框大小：边框框；
}
.栏目{
浮动：左；
宽度：50%；
填充：10px；
高度：450px；
}
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
.罗：之后{
宽度：900px；
}
.submitBtn
{
利润率：10px；
}
输入{
自对准：居中；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.栏目{
宽度：100%；
}
}
#sbtbtn
{
字体系列：Verdana，日内瓦，无衬线；
光标：指针；
}

HTML（正文）：

 <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">
      <!-- Highlight Card -->
      <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>

    </div>

欢迎
要求
回应
组件名称
API名称
错误消息
{{binary.componentName}
{{binary.apiName}
{{binary.errorMessage}

上述*.html将给出以下输出：

截图-1：

当我在文本字段中输入值并单击submit按钮时，它显示如下：

预期结果：

<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>

1。我只想得到两个没有背景色的HTML列布局。

2。我想要在Culn21页面中间的文本字段和提交按钮。< /强>

3。结果应符合第2列页面。

4。如果值增加，则第2列中应有侧栏，所有数据应显示在第2列中。

我对网页设计很陌生。有人能帮我做到这一点吗

---

注意：这是响应页面。这种设计应该适用于所有设备。

您应该使用flex，而不是float

.row {
    display: flex;
    flex-direction: row; //unnecessary, but if you want you can use it
 }

.column {
    max-width: 50%;
    width: 50%;
 }

此文本溢出可能是由您的表引起的。由于您的列如果输入了超出其处理能力的数据，则您的列会更宽

IMHO这也可以用flex解决，而不是使用table。

---

这里是flex box指南的链接：

如果可能，请添加您的。这与组件代码的角度有关，可以更好地帮助您。Archana:您是否在html中包含引导css，当我包含

引导版本4.3.1

@Ajith时，它对我工作正常-你能给我共享工作代码吗？这样我就可以尝试了。请在你的html中链接以下内容我没有做其他更改返回404错误代码：加载资源失败：服务器响应状态为404（未找到）