Bootstrap style input groups

BSInputGroupsReact.js

import React from "react";
import { render } from "react-dom";
import styled from "styled-components";

const InputGroup = styled.div`
  position: relative;
  display: flex;
  align-items: stretch;
  flex-wrap: no-wrap;
`;

const InputGroupLabel = styled.div`
  position: relative;
  display: flex;
  align-items: center;
  margin: 0px;
  font-size: 1rem;
  padding: 0.375rem 0.75rem;
  background-color: ${props => (props.error ? "#E6ADB7" : "#E9ECEF")};
  color: ${props => (props.error ? "#C33B4E" : "#495057")};
  border: 1px solid ${props => (props.error ? "#C33B4E" : "#CED4DA")};
  border-right: none;
  border-radius: 0.25rem 0 0 0.25rem;
  margin: 0px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
`;

const InputGroupInput = styled.input`
  position: relative;
  display: block;
  flex: 1 1 auto;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  color: ${props => (props.error ? "#C33B4E" : "#495057")};
  background-color: #fff;
  border: 1px solid ${props => (props.error ? "#C33B4E" : "#CED4DA")};
  border-radius: 0 0.25rem 0.25rem 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 1%;
  &:focus {
    border-color: #1e90ff;
    box-shadow: 0 0 5px #1e90ff;
  }
`;

const App = () => (
  <div>
    <div style={{ width: "100%" }}>
      <InputGroup>
        <InputGroupLabel >Label</InputGroupLabel>
        <InputGroupInput />
      </InputGroup>
    </div>
  </div>
);

render(<App />, document.getElementById("root"));