Update form style

form/button.css

@@ -9,9 +9,7 @@
   font-weight: bolder;
 
   font-size: 1em;
-  height: 100%;
   padding: 0 0.5em;
-  margin-left: 0.2em;
 }
 
 .button--danger {

form/form.css

@@ -23,15 +23,13 @@
 
 .form--horizontal .form__submit {
   flex: none;
-  align-self: center;
+  align-self: stretch;
 }
 
 .form--inline {
   display: inline-flex;
   flex-direction: row;
   align-items: center;
-  border-color: black;
-  border-style: solid;
 }
 
 .form--inline .form__title {
@@ -39,5 +37,5 @@
 }
 .form--inline .form__submit {
   flex: none;
-  align-self: center;
+  align-self: stretch;
 }

form/form.html

@@ -34,7 +34,7 @@
         <label class="radio__label" for="option-3">Option 3</label>
       </div>
       <p class="field__error-help-msg"></p>
-      </div>
+    </div>
     </div>
     <div class="form__field field" id="input-select">
       <label class="field__label" for="select">Select</label>
@@ -47,7 +47,8 @@
     </div>
     <div class="form__field field" id="input-textarea">
       <label class="field__label" for="textarea">Textarea</label>
-      <textarea class="field__input input" id="textarea" type="textarea" name="text" label="Texte" placeholder="Ajouter une note"></textarea>
+      <textarea class="field__input input" id="textarea" type="textarea" name="text" label="Texte"
+        placeholder="Ajouter une note"></textarea>
       <p class="field__error-help-msg"></p>
     </div>
     <div class="form__field field" id="input-multiple">
@@ -93,7 +94,8 @@
     </div>
     <div class="form__field field field--grid" id="input-textarea">
       <label class="field__label" for="textarea">Textarea</label>
-      <textarea class="field__input input" id="textarea" type="textarea" name="text" label="Texte" placeholder="Ajouter une note"></textarea>
+      <textarea class="field__input input" id="textarea" type="textarea" name="text" label="Texte"
+        placeholder="Ajouter une note"></textarea>
     </div>
     <div class="form__field field field--grid" id="input-multiple">
       <label class="field__label" for="multiple">Select multiple</label>
@@ -139,7 +141,8 @@
     </div>
     <div class="form__field field field--grid field--error" id="input-textarea">
       <label class="field__label" for="textarea">Textarea</label>
-      <textarea class="field__input input" id="textarea" type="textarea" name="text" label="Texte" placeholder="Ajouter une note"></textarea>
+      <textarea class="field__input input" id="textarea" type="textarea" name="text" label="Texte"
+        placeholder="Ajouter une note"></textarea>
       <p class="field__error">This field is bad, and you should feel bad</p>
     </div>
     <div class="form__field field field--grid" id="input-multiple">
@@ -202,8 +205,9 @@
     <form class="form form--horizontal" action="#" method="post">
       <div class="form__field">
         <div class="field" id="input-text">
-          <label class="field__label" for="text">Text</label>
-          <input class="field__input input" type="text" name="text" label="Text">
+          <label class="field__label" for="textarea">Textarea</label>
+          <textarea class="field__input input" id="textarea" type="textarea" name="text" label="Textarea"
+            placeholder="Ajouter une note"></textarea>
         </div>
       </div>
       <button class="form__submit button button-success" type="submit">Go</button>
@@ -215,6 +219,15 @@
     <h1 class="form__title">the tag</h1>
     <button class="form__submit button button--inline button--danger" type="submit">&times;</button>
   </form>
+
+  <h1>Inline forms (actual)</h1>
+  <form class="form form--inline " action="#" method="post">
+    <p class="form__title badge badge--square">connecting</p>
+    <button class="form__submit button button--inline button--danger" type="submit">×</button>
+  </form>
+
+  <br>
+  <br>
 </body>
 
 <script>

form/style.css

@@ -31,3 +31,9 @@ body {
 .body--centered {
   align-items: center;
 }
+
+.badge {
+  padding: 0.5em; 
+  background-color: darkblue; 
+  color: white;
+}