<div class="wrapper">
  <div class="alert">
    <p>Your browser doesn't support CSS :has. Please view it in Safari 15.4 or the latest Chrome Canary.</p>
  </div>
  <div class="eg">
    <div class="box">
        <h2>Hello, Ahmad! We're sorry to see you leave.</h2>
        <p style="margin-bottom: 1.5rem;">Can you help us to know why?</p>
        <hr>
        <p>
          <label for="">What's the reason for X?</label>
          <select name="" id="">
            <option value="0">Too expensive</option>
            <option value="other">Other</option>
          </select>
        </p>

        <p class="other-field">
          <label for="">Share your feedback</label>
          <input type="text">
        </p>

        <button>Cancel subscription</button>
      </div>
  </div>
</div>
</div>
.eg {
  .box:has(option[value="other"]:checked) .other-field {
    display: block;
  }

  .other-field {
    display: none;

    input {
      font-size: 16px;
      width: 100%;
    }
  }

  .box {
    padding: 1rem;
    background-color: antiquewhite;
  }

  h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }

  p {
    margin-bottom: 1rem;
  }

  select {
    font-size: 16px;
    width: 100%;
    margin-bottom: 1.5rem;
  }

  label {
    display: block;
    margin-bottom: 0.5rem;
  }
}

/* Other styles */
.alert {
  display: block;
  padding: 1rem;
  text-align: center;
  margin-bottom: 1rem;
  background-color: #ffeeee;
  border: 1px solid red;
  border-radius: 5px;
  font-size: 0.75rem;
}

@supports selector(:has(*)) {
  .alert {
    display: none;
  }
}

body {
  font-family: "system-ui";
  padding: 1rem;
}

.eg {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;

  > * {
    flex: 1;
  }
}

.wrapper {
  max-width: 700px;
  margin: 2rem auto;
}

img {
  max-width: 100%;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.