Stylowanie formularza za pomocą flexy

Question

Witam!

 Jeżeli chcę ostylować formularz za pomocą flex'y tak aby jeden element znajdował się obok drugiego, kolejny był na całej szerokości div'a następny wyświetlał się z prawej strony div'a jeszcze inny na środku div'a. To czy poprawnym rozwiązaniem jest osadzenie każdego elementu w pojemnikach tak jak pod tym linkiem ? Dodam że klasę .input-container wykorzystuję w kilku podstronach i styl wyświetlania elementów jest identyczny do podanego.

https://jsfiddle.net/adriansikora344/63ezmesL/

Prośba do oceny kodu.

Answer 1

Error: 500

WOW! Server Error. The email has been sent to the admin.

Comments

Nie rozumiem ?

---

jsfiddle chyba nawala

---

A ten link ? https://jsfiddle.net/adriansikora344/1gomnruc/

 

Kod HTML:

<div class="box">
    <div class="header">
       <a style="font-size: 14px;">header</a>
       <a style="font-size: 20px;">X</a>
     </div>

    <div class="input-container">
       <div class="input-info">
          <label>label:</label>
          <a>error<br/>message</a>
        </div>
       
       <input type="text">
       
       <div class="input-info-right">
          <a>Tu muszą być przynajmniej trzy znaki !</a>
       </div>
     </div>
     
     <div class="btn-container">
        <input type="button" value="anuluj">
        <input type="button" value="ok">
     </div>
</div>

 

Kod CSS:

.box { padding: 10px 10px; width: 400px; border: 1px solid black; }
.header {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 10px;
  border: 1px solid black;
 margin-bottom: 20px;
}

.input-info {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: space-between;
  padding: 2px 11px;
}
.input-container > input { box-sizing: border-box; width: 100%; }
.input-info-right { display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-end;  padding: 2px 11px;}

.btn-container {  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: center;
  padding: 2px 11px;
  margin-top: 50px;
}

Faktycznie raz działa link a raz nie...