Can I use CSS to realize the relative position of two elements?

as shown in figure



  1. the right and bottom margins of Button2 are fixed, and the position of Button1 is always on the left of 2
  2. when the page shrinks, Button2 always keeps the distance to the right, moves to the left, and there is always a minWidth, Button1 at 2 to the left
  3. Button2 when the page width is greater than a certain value, stretch according to the screen size, while keeping the distance between the left and right sides, Button1 is always on the left side of 2

if you don"t use JS to calculate the position, can you use pure CSS to set the relative position of one element relative to another sibling element?

Jun.03,2021

margin-right.

Dom:

``

<div id="father">
    <div class="btn1"></div>
    <div class="btn2"></div>
</div>

``

Css:
``

   -sharpfather {
      position: fixed;
      right: 20px;
      bottom: 20px;
      width: 100%;
      text-align: right;
    }
    -sharpfather div {
      height: 100px;
      display: inline-block;
    }
    .btn1 {
      background-color: red;
      width: 100px;
    }
    .btn2 {
      background-color: blue;
      min-width: 300px;
      width: 40%;
      margin-left: 10px;
    }
}``
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e5383f-4524b.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e5383f-4524b.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?