Can someone help me understand why the div sizes are not consistent? :/
The size should be uniform across components, based on text size.
https://i.sstatic.net/KEcHB.png
Check out the Codesandbox here.
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;
`;