Code:

<div class="row">
    <div class="left" style="background-color:#bbb;">
        <h2>菜单</h2>
        <input type="text" id="mySearch" onkeyup="myFunction()" placeholder="搜索.." title="输入分类">
        <ul id="myMenu">
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
            <li><a href="#">PHP</a></li>
            <li><a href="#">Python</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">SQL</a></li>
            <li><a href="#">Bootstrap</a></li>
            <li><a href="#">Node.js</a></li>
            <li><a href="#">中文分类</a></li>
        </ul>
    </div>

<div class="right" style="background-color:#ddd;">
        <h2>内容</h2>
        <p>在搜索框输入菜单列表的分类名搜索对应内容。</p>
        <p>Some text..Some text..Some text..Some text..Some text..Some text..Some text..Some text..</p>
        <p>Some other text..Some text..Some text..Some text..Some text..Some text..Some text..Some text..</p>
        <p>Some text..</p>
    </div>
</div>
<style>
    body {
      font-family: Arial, Helvetica, sans-serif;
    }
    
    * {
      box-sizing: border-box;
    }
    
    /* Create a column layout with Flexbox */
    .row {
      display: flex;
    }
    
    /* Left column (menu) */
    .left {
      flex: 35%;
      padding: 15px 0;
    }
    
    .left h2 {
      padding-left: 8px;
    }
    
    /* 右侧(内容) */
    .right {
      flex: 65%;
      padding: 15px;
    }
    
    /* 搜索框 */
    #mySearch {
      width: 100%;
      font-size: 18px;
      padding: 11px;
      border:1px solid #ddd;
    }
    
    /* 左侧导航 */
    #myMenu {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }
    
    #myMenu li a {
      backgrxound-color: #f6f6f6;
      padding: 12px;
      text-decoration: none;
      font-size: 18px;
      color: black;
      display: block
    }
    
    #myMenu li a:hover {
      background-color: #eee;
    }
</style>

1000bd Online Code Preview

Code:

Run Result：