input:focus to change an other div

I want to select my input field and with input:focus I'd like to move the paragraph text above the input field. And when it's unselected I'd like the text to move back.

HTML

<div class="tekstenveld">
  <p>Example text</p>
  <input type="text" class="bedrijfsnaam" name="bedrijfsnaam">
</div>

CSS

input {
  height: 65px;
  width: 300px;
  outline: none;
  border: none;
  padding: 0 10px 0 10px;
  font-size: 2em;
  font-family: 'Lato';
  border-bottom: 2px solid #000;
  transition: 0.2s;
  -webkit-transition: 0.2s;
  z-index: 100;
}

input:focus {
  border-bottom: 6px solid #D11E1F;
  transition: 0.2s;
  -webkit-transition: 0.2s;
}

.tekstenveld {
  position: relative;
  margin: 10px 0 10px 0;
}

.tekstenveld p {
  position: absolute;
  display: block;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-size: 1.5em;
  bottom: 7px;
  left: 12px;
  z-index: 50;
  pointer-events: none;
}

.tekstenveld input:focus p {
  bottom: 40px;
}