Front-end - CSS one row divided into two columns

Question

The design drawing stipulates that the length of the left block is 218px, but I have no way to determine the length of the next block in the same line. I hope that the last block can automatically fill the current line. Please advise

The current css style of the first block is:

   float: left;
   width: 218px;

Rendering:

Answer 1

<style type="text/css">
        .row{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-content: center;
            align-items: stretch;
            height: 50px;
        }
        .p1{
            width: 218px;
            flex-shrink: 0;
            background-color: #3c8dbc;
        }
        .p2{
            width: 1%;
            flex: 1;

            background-color: #5b9909;
        }
    </style>
    
    <p class="row">
        <p class="p1">123123123123123</p>
        <p class="p2">1232131</p>
    </p>

flex you deserve but remember to add the prefix

Answer 2

The block on the left can be positioned: absolute; absolutely positioned. The block on the right is directly margin-left: 218px; and then display:block;

Answer 3

1. Parent {display:flex;}, right {flex:1}

2. Right {float:left;width:calc(100% - 218px);}

Answer 4

Last piece{

width:calc(100% - 218px);
float: left;

}

Answer 5

The percentage is okay

Answer 6

flex is a solution, but many times it is now required to be compatible with low-end browsers such as IE8, and flex is not possible.
Provide another solution:
Structure:

<p class="box">
    <p class="left">left</p>
    <p class="right">right</p>
</p>

Style:

.left, .right {
        height: 30px;
    }
    .left {
        float: left;
        width: 200px;
        background: #f90;
    }
    .right {
        background: #369;
        overflow: hidden;
    }