Как сделать div и кнопку одинакового размера?

Question

Я не уверен, почему div не такой же размер: /

Размер должен быть одинаковым между компонентами, в зависимости от размера текста.

Codesandbox .

import * as React from "react";
import styled from "styled-components";

export default function App() {
  return (
    <div style={{ display: "flex" }}>
      <Select>Aa</Select>
      <Button>Aa</Button>
      <Input />
    </div>
  );
}

const Button = styled.button`
  box-sizing: content-box;
  min-height: 1.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font: inherit;
  box-shadow: inset 0 0 0 1px blue;
  margin: 5px;
  padding: 5px 10px;
  border: 0;
  border-radius: 3px;
  transition: all 0.2s ease-out;
  user-select: none;
  outline: none;
`;
const Input = styled.input`
  box-sizing: content-box;
  min-height: 1.4rem;
  margin: 5px;
  vertical-align: middle;
  padding: 5px 0;
`;
const Select = styled.div`
  box-sizing: content-box;
  display: flex;
  align-items: center;
  box-shadow: inset 0 0 0 1px blue;
  padding: 5px 10px;
  border-radius: 5px;
`;

Answer 1

Сначала нужно дать каждому из них одинаковую высоту. Затем вы должны сбросить поля или вы можете дать им все то же поле. Также необходимо box-sizing: border-box;.

button {
  box-sizing: content-box;
  min-height: 1.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font: inherit;
  box-shadow: inset 0 0 0 1px blue;
  margin: 5px;
  padding: 5px 10px;
  border: 0;
  border-radius: 3px;
  transition: all 0.2s ease-out;
  user-select: none;
  outline: none;
}

input {
  box-sizing: content-box;
  min-height: 1.4rem;
  margin: 5px;
  vertical-align: middle;
  padding: 5px 0;
}

div {
  box-sizing: content-box;
  display: flex;
  align-items: center;
  box-shadow: inset 0 0 0 1px blue;
  padding: 5px 10px;
  border-radius: 5px;
}

div,
button,
input {
  box-sizing: border-box;
  margin: 0;
}

<span style="display:flex">
  <input/>
  <div>Div</div>
  <button>Button</button>
 </span>

Answer 2

Попробуйте разместить кнопку внутри Div и измените высоту на 100%.