<div class="call-to-action">
  <div class="cta-layout">
    <div class="cta-content">
      <h3>This is a Call to Action</h3>
      <p>Lorem ipsum dolor!</p>
    </div>
    <form action="#" method="POST">
      <fieldset>
        <label class="sr-only" for="email">Email</label>
        <input id="email" type="text" placeholder="geoff@css-tricks.com">
        <button>Submit</button>
      </fieldset>
    </form>
  </div>
</div>

:root {
  --color-light: hsl(40 75% 90%);
  --color-dark: hsl(40 75% 10%);
  --font: Merriweather, serif;
  --size: 1rem;
  --radius: calc(var(--size) * 2);
}

html {
  font-size: 18px;
}

body {
  padding: calc(var(--size) * 5);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.call-to-action {
  background: var(--color-light);
  container: cta / inline-size;
}

.cta-layout {
  border: 1px solid var(--color-dark);
  display: flex;
  font-size: 1rem;
  gap: var(--size);
  padding: var(--size);
}

.call-to-action h3 {
  font-size: 1.5em;
  margin: 0;
}

.cta-content {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  place-items: start center;
}

.cta-content p {
  font-size: 1.2em;
  margin: 0;
}

.call-to-action fieldset {
  justify-content: end;
  border: 0;
  display: flex;
  gap: var(--size);
  padding: 0;
}

.call-to-action input {
  appearance: none;
  border: 1px solid var(--color-dark);
  border-radius: var(--radius);
  flex: 1 0 400px;
  padding: var(--size);
}

.call-to-action button {
  appearance: none;
  background: var(--color-dark);
  border: 1px solid var(--color-dark);
  border-radius: var(--radius);
  color: var(--color-light);
  cursor: pointer;
  flex: 0 1 120px;
  padding: calc(var(--size) / 2) var(--size);
}

@container cta (width > 800px) {
  .cta-layout {
    justify-content: space-between;
  }
}

@container cta (width < 800px) {
  .cta-layout {
    flex-direction: column;
  }
  
  .cta-layout input,
  .cta-layout button {
    flex: 1 1 auto;
  }
}

@container cta (width < 350px) {
  .cta-layout fieldset {
    flex-direction: column;
  }
  
  .cta-content p {
    display: none;
  }
}