H3 and P don't line-break

Question

Normally, putting an <h3>bla bla</h3> and then a <p>bladdibladdi</p> should naturally line-break, because of them both being blocks.

But using this code apparently doesn't and now I've spent far too much time on this simple problem, so I'm posting it here.

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

a {
  color: #C21351;
}

h2 {
  font-size: 40pt;
  color: #C21351;
}

header {
  margin: 0.5%;
  display: flex;
  flex-direction: row;
}

header div {
  margin: 0px 1% 0px 0px;
}

#userinfo {
  color: #ffffff;
}

#userinfo h3 {
  font-size: 20pt;
}

#userinfo p {
  margin: 0px;
  font-size: 16pt;
}

.nyttjobb {
  width: 74px;
  height: 74px;
  background-image: url('images/nyttjobb.png');
  background-repeat: no-repeat;
  display: inline-block;
}

.nyttjobb:hover {
  background-image: url('images/nyttjobbhover.png');
}

.listaalla {
  width: 74px;
  height: 74px;
  background-image: url('images/listaalla.png');
  background-repeat: no-repeat;
  display: inline-block;
}

.listaalla:hover {
  background-image: url('images/listaallahover.png');
}

.tablecontainer {
  width: 100%;
  display: flex;
  flex-flow: column;
}

.contentcontainer {
  width: 100%;
  display: flex;
  flex-flow: column;
  margin: 0px 0px 40px 0px;
  background-color: rgba(47, 54, 64, 0.39);
}

.tablerow {
  width: 100%;
  display: flex;
  flex-flow: row;
  justify-content: stretch;
  color: #ffffff;
}

.action {
  width: 25%;
  margin: 0 2.5%;
}

.rowhidden {
  display: none;
}

.rowflex {
  display: flex;
  width: 100%;
  background-color: #ffffff;
  flex-direction: column;
}

.expand {
  background-image: url(images/rowexpand.png);
  width: 61px;
  height: 61px;
}

.contract {
  height: 61px;
  background-image: url(images/rowcontract.png);
  width: 61px;
}

.cell {
  display: flex;
  width: 100%;
}

h3,
p {
  display: block;
  clear: both;
}

#editerajobbmain {
  background-color: #ffffff;
  width: 100%;
}

h1 {
  color: #C21351;
}


/* Lägg till jobb */

#formcontainer {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
}

.forminput {
  width: 20%;
  display: flex;
  flex-direction: column;
}

label {
  color: #C21351;
}

input[type=datetime],
input[type=text],
input[type=tel],
input[type=email],
input[type=datetime],
input[type=password] select,
textarea,
.user,
.password {
  border: 2px solid #d0d0d0;
  height: 48px;
  width: 300px;
  border-radius: 10px;
  padding: 10px;
  font-size: 16pt;
  font-family: arial;
  margin: 0px 0px 20px 0px;
}

input[type=submit] {
  width: 300px;
  font-size: 16pt;
}

textarea {
  height: 192px;
}

.cell select {
  width: 150px;
}

#regnummer {}


/* LOGIN form */

.wrapper {
  width: 600px;
  margin: 0px auto;
}

.wrapper p {
  color: #FFFFFF;
}

.loginform label {
  color: #C21351;
  display: block;
  font-size: 30pt;
}

.loginform input[type=datetime],
.loginform input[type=text],
.loginform input[type=tel],
.loginform input[type=email],
.loginform input[type=datetime],
.loginform input[type=password],
.loginform select,
.loginform textarea,
.loginform .user,
.loginform .password {
  border: 2px solid #d0d0d0;
  height: 100px;
  width: 600px;
  border-radius: 10px;
  padding: 10px;
  font-size: 30pt;
  font-family: arial;
  margin: 0px 0px 20px 0px;
}

.loginform input[type=submit] {
  width: 600px;
  font-size: 30pt;
  margin: 20px 0px;
  height: 100px;
}


/* Footer */

footer {
  width: 100%;
  position: fixed;
  bottom: 0px;
  /*height: 150px;*/
  left: 0px;
  background-color: #C21351;
  color: #ffffff;
  z-index: 0;
}

footer a {
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
}

footer a:hover {
  color: #252525;
  text-decoration: underline;
}

footer div {
  width: 600px;
  margin: 0px auto;
}

footer ul {
  padding: 0px;
}

footer ul li {
  list-style: none;
  margin: 0px;
}


/* Cookies!!! */

.cookie-container {
  position: fixed;
  bottom: -100%;
  left: 0;
  right: 0;
  background: rgba(47, 54, 64, 0.39);
  color: #f5f6fa;
  padding: 0;
  box-shadow: 0 -2px 16px rgba(47, 54, 64, 0.39);
  z-index: 5;
  transition: 400ms;
}

.cookie-container.active {
  bottom: 0;
  height: 100%;
}

.cookie-content a {
  color: #f5f6fa;
  text-decoration: none;
  font-weight: bold;
}

.cookie-content a:hover {
  text-decoration: underline;
}

.cookie-content {
  height: 360px;
  background-color: #2f3640;
  padding: 32px;
  margin: 300px 0px 0px 0px;
}

.cookie-btn {
  background: #C21351;
  border: 0;
  color: #ffffff;
  padding: 12px 48px;
  font-size: 30pt;
  margin-bottom: 16px;
  border-radius: 8px;
  cursor: pointer;
}

<main>
  <div id="table">
    <div class="tablecontainer">
      <form id="">
        <div class="contentcontainer">

          <!-- Använd javascript:void(null) för att sidan inte ska hoppa runt när man klickar. -->

          <div class="">
            <div class="cell">
              <h3>Registreringsnummer</h3>
              <p>regnummer</p>
            </div>
            <div class="cell">
              <h3>Telefon</h3>
              <p>kontakttel</p>
            </div>
            <div class="cell">
              <h3>E-post</h3>
              <p>kontaktepost</p>
            </div>
            <div class="cell">
              <h3>Jobbtyp</h3>
              <p>jobbtyp</p>
            </div>
            <div class="cell">
              <select>
                <option value="">
                  status
                </option>
                <option>Kontaktad</option>
                <option>Klar</option>
                <option>Påbörjad</option>
                <option>Inkommen</option>
                <option>Avslutad</option>
              </select>
            </div>
            <div class="cell">
              <h3>Information</h3>
              <p>info</p>
            </div>
            <div class="cell">
              <h3>Arbetstid</h3>
              <p>jobbtid</p>
            </div>
            <div class="cell">
              <h3>Offererat pris</h3>
              <p>pris</p>
            </div>
            <div class="cell">
              <h3>Reservdelar</h3>
              <p>reservdelar</p>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</main>

I know it's not the tidiest of coding. It's not the issue right now. That comes later when everything is working as intended.

Answer 1

Display:flex on .cell is doing it. Remove that to make that class like this:

.cell {
    width: 100%;
  }