JSFiddle - React, Tailwind, and code Playground

by Alexey Ukolov

HTML

<div>
<input type="text" id="kkal">
<label for="kkal">Ккал, %:</label>
</div>

CSS

div {
  display: flex;
  flex-direction: row-reverse;
  align-items: stretch;
  justify-content: flex-end;
}

label {
  background: gray;
  border-radius: 5px 0 0 5px;
  padding: 4px;
  border: 1px solid transparent;
}

input {
  background: gray;
  border-radius: 0 5px 5px 0;
  padding: 4px;
  border: 1px solid transparent;
}

input:focus {
  outline: none;
  border-color: blue;
  border-left-color: transparent;
}
input:focus + label {
  outline: none;
  border-color: blue;
  border-right-color: transparent;
}