<div class="banner">
  <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet faucibus turpis ac accumsan. ornare a in lacus. </p>
  <button> Button 1</button>
  <button> Button 2</button>
</div>

.banner {
  --w:700px;
  --c:(100vw - var(--w));
  
  color:#fff;
  background:#000e;
  padding:10px;
  box-sizing:border-box;
  text-align:center;
  position:fixed;
  bottom:clamp(0px,var(--c)*1000,calc(100% - 10px));
  transform:translateY(clamp(0%,var(--c)*1000,100%));
  right:clamp(0px,var(--c)*1000,10px);
  width:clamp(300px,var(--c)*-1000,100%);
}
.banner p {
  margin:0;
  display:inline-block;
  text-align:left;
}
.banner button {
  border:none;
  cursor:pointer;
  background:#fff;
  color:#000;
  margin: 10px 5px 0 0;
  font-size:clamp(15px,var(--c)*1000,20px);
  padding: 5px 20px;
}