Inline form

form/button.css

@@ -0,0 +1,20 @@
+.button {
+  
+}
+
+.button--inline {
+  all: unset;
+  display: inline-block;
+  cursor: pointer;
+  font-weight: bolder;
+
+  font-size: 1em;
+  height: 100%;
+  padding: 0 0.5em;
+  margin-left: 0.2em;
+}
+
+.button--danger {
+  background-color: red;
+  color: white;
+}

form/form.css

@@ -17,6 +17,22 @@
   flex-grow: 1;
 }
 
+.form--horizontal .form__submit {
+  flex: none;
+  align-self: center;
+}
+
+.form--inline {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  border-color: black;
+  border-style: solid;
+}
+
+.form--inline .form__title {
+  margin: 0px;
+}
 .form--inline .form__submit {
   flex: none;
   align-self: center;

form/form.html

@@ -84,6 +84,12 @@
     </div>
     <button class="form__submit button button-success" type="submit">Go</button>
   </form>
+
+  <h1>Tag-like forms</h1>
+  <form class="form form--inline" action="#" method="post">
+    <h1 class="form__title">the tag</h1>
+    <button class="form__submit button button--inline" type="submit">&times;</button>
+  </form>
 </body>
 
 </html>

form/style.css

@@ -1,3 +1,4 @@
+@import 'button.css';
 @import 'form.css';
 @import 'field.css';
 @import 'select.css';