<section>
  <div class="container">
    <div class="yellow"></div>
    <div class="red"></div>
    <div class="blue-wrapper">
      <div class="blue">Sticky block</div>
    </div>
    <div class="green"></div>
  </div>
</section>
section{
  padding: 15px;
}

.container{
  width: 100%;
  max-width: 1150px;
  margin: 0 auto;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.yellow{
  background-color: yellow;
  height: 100px;
  width: 100%;
}

.red{
  min-height: 1000px;
  width: calc(50% - 10px);
  background: red;
}

.blue-wrapper{  
  width: calc(50% - 10px);
}

.blue{
  position: sticky;
  top: 15px;
  background: blue;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  color: #fff;
}

.green{
  min-height: 400px;
  background: green;
  width: 100%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.