<div class="heading">
  <h1>Fixed child element<br/>based on parent element</h1>
  <p>- parent has NO horizontal padding -</p>
</div>

<div class="parent-container">
  <p>This is parent!</p>
  <div class="fixed-child-left">
    <div class="content">child<br/>left</div>
  </div>
  <div class="fixed-child-right">
    <div class="content">child<br/>right</div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Teko:wght@500&display=swap');
:root {
  --bg-color: #faeee7;
  --main-color: #33272a;
  --accent-color: #d3e236;
}
html {
  font-size: 1.25rem;
}
body {
  background-color: var(--bg-color);
  letter-spacing: .05em;
}
* {
  box-sizing: border-box;
  font-family: 'Teko', sans-serif;
}
.heading {
  text-align: center;
  margin: 4rem 0;
  color:  var(--main-color);
}

// ★magic★ from here!!

.parent-container {
  position: relative; //★
  width: 50%; //★
  max-width: 800px; //★
  height: 3000px;
  margin: 0 auto;
  background-color: var(--main-color);
  text-align: center;
  color: var(--bg-color);
  border-radius: .5rem;
  p {
    padding-top: 5rem;
  }
}

.fixed-child-left {
  position: fixed; //★
  bottom: 0;
  transform: translateX(-100%); //★
  .content {
    padding: 1rem;
    background-color: var(--accent-color);
    color: #333;
    border-radius: .25rem;
  }
}

.fixed-child-right {
  position: fixed; //★
  width: 50%; //★ same as parent
  max-width: 800px; //★ same as parent
  bottom: 0;
  .content {
    float: right; //★
    transform: translateX(100%); //★
    padding: 1rem;
    background-color: var(--accent-color);
    color: #333;
    border-radius: .25rem;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.