<div class="cp_iptxt">
  <input class="ef" type="text" placeholder="">
  <label>お名前</label>
  <span class="focus_line"><i></i></span>
</div>
<div class="cp_iptxt">
  <input class="ef" type="text" placeholder="">
  <label>E-Mail</label>
  <span class="focus_line"><i></i></span>
</div>

.cp_iptxt {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  margin: 20px 0;
}
.cp_iptxt input[type='text'] {
  font: 15px/1.6 sans-serif;
  width: 100%;
  padding-left: 4em;
  border: 1px solid #1b2538;
  background: transparent;
  border-radius: 0;
  outline: none;
}
.cp_iptxt .ef {
  padding: 7px 14px;
  border: 1px solid #1b2538;
  background: transparent;
  transition: 0.4s;
}
.cp_iptxt .ef ~ .focus_line:before,
.cp_iptxt .ef ~ .focus_line:after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 0;
  height: 2px;
  background-color: #da3c41;
  transition: 0.3s;
}
.cp_iptxt .ef ~ .focus_line:after {
  top: auto;
  right: 0;
  bottom: 0;
  left: auto;
}
.cp_iptxt .ef ~ .focus_line i:before,
.cp_iptxt .ef ~ .focus_line i:after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 2px;
  height: 0;
  background-color: #da3c41;
  transition: 0.4s;
}
.cp_iptxt .ef ~ .focus_line i:after {
  top: auto;
  right: 0;
  bottom: 0;
  left: auto;
}
.cp_iptxt .ef:focus ~ .focus_line:before,
.cp_iptxt .ef:focus ~ .focus_line:after {
  width: 100%;
  transition: 0.3s;
}
.cp_iptxt .ef:focus ~ .focus_line i:before,
.cp_iptxt .ef:focus ~ .focus_line i:after {
  height: 100%;
  transition: 0.4s;
}
.cp_iptxt .ef ~ label {
  position: absolute;
  left: 14px;
  color: #aaaaaa;
  transition: 0.3s;
}
.cp_iptxt .ef:focus ~ label {
  font-size: 12px;
  top: -18px;
  left: 0;
  color: #da3c41;
  transition: 0.3s;
}