The child element is centered vertically adaptively with the sibling element.

the parent element has two child elements. The two child elements need to be displayed side by side. The content of the child element on the right is not fixed. It is necessary to make the element on the left adapt to the change of the child element on the right side and center the parent element vertically

.

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }

    -sharpdemo {
        width: 410px;
        border: 1px solid red;
    }

    .sample-1 {
        display: inline-block;
        width: 200px;
        border: 1px solid black;
    }

    .sample-2 {
        width: 200px;
        display: inline-block;
        border: 1px solid orange;
    }
    </style>
</head>

<body>
    <div id="demo">
        <div class="sample-1">
            
        </div>
        <div class="sample-2">
            bodybodywindow.onscrollonscroll,wkwebview
        </div>
    </div>
</body>

</html>
Mar.28,2021

.sample-1 {

    display: inline-block;
    width: 200px;
    border: 1px solid black;
    vertical-align:middle;
}

.sample-2 {
    width: 200px;
    display: inline-block;
    border: 1px solid orange;
    vertical-align:middle;
}

-sharpdemo {
        width: 410px;
        border: 1px solid red;
        display: flex;
        align-items: center;
    }
Menu