*{margin: 0;padding: 0;}

.left{

   float: left;

   width: 200px;

   border: 1px solid #333;

}

.right{

   margin-left:200px;

   border: 1px solid #333;

}

<!-- 方法一 ： 左边 左浮动，右边 margin-left  -->

<div class="left">

   <p>左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左</p>

</div>

<div class="right">

   <p>右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右</p>

</div>

*{margin: 0;padding: 0;}

.left{

   position: absolute;

   top: 0;

   left: 0;

   width: 200px;

   border: 1px solid #333;

}

.right{

    margin-left:200px;

    border: 1px solid #333;

    word-break: break-all;

}

<!-- 方法二 ：左边使用绝对定位，右边margin-left  -->

<div class="left">

   <p>左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左</p>

</div>

<div class="right">

    <p>右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右</p>

</div>

*{margin: 0;padding: 0;}

.left{

    position: absolute;

    top: 0;

    left: 0;

    width: 200px;

    border: 1px solid #333;

}

.right{

   position: absolute;

   left: 200px;

   top:0;

   border: 1px solid #333;

}

<!-- 方法三 ：左边右边两边都使用绝对定位  -->

<div class="left">

    <p>左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左</p>

</div>

<div class="right">

     <p>右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右</p>

</div>

*{margin: 0;padding: 0;}

.left{

     float: left;

     width: 200px;

     border: 1px solid #333;

}

.right{

     overflow: hidden;

     border: 1px solid #333;

}

<!-- 方法四 ：左边左浮动，右边 overflow：hidden  -->

<div class="left">

   <p>左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左</p>

</div>

<div class="right">

     <p>右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右</p>

</div>

*{margin: 0;padding: 0;}

.box{

    display: flex;

}

.left{

     width: 200px;

     border: 1px solid #333;

}

.right{

    flex:1;

    width: 0;

    border: 1px solid #333;

}

<!-- 方法五 ：弹性布局，左边固定宽度，右边flex  -->

<div class="box">

   <div class="left">

       <p>左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左</p>

   </div>

   <div class="right">

      <p>右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右</p>

   </div>

</div>