<div class="container">
  <article id="text">
    <h1><code>input type=text</code></h1>
    <input type="text" value="bad" />
  </article>

  <article id="search">
    <h1><code>input type=search</code></h1>
    <input type="search" value="good" />
  </article>
  
  <article id="form">
    <h1><code>form</code></h1>
    <form>
      <input type="search" value="no change" />
    </form>
  </article>
  
  <article id="form-action">
    <h1><code>form with action</code></h1>
    <form action="">
      <input type="search" value="best" />
    </form>
  </article>
</div>
.container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.container article {
  flex-basis: 20em;
  text-align: center;
}

:root {
  font-family: -apple-system, Roboto, Segoe UI, sans-serif;
}

code {
  font-family: "Operator Mono", "Fira Code", "Ubuntu Mono", "Droid Sans Mono", "Liberation Mono", "Source Code Pro", Menlo, Consolas, Courier, monospace;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.