I have 2 lists side by side. These line up nicely, but when I add the input boxes it goes out of sync. Any idea why this is happening? My code is below. And also screenshots.
Please find codesandbox here too.
const Wrapper = styled.article`
width: 240px;
background: #fff;
text-align: center;
padding: 12px 0 8px 0;
`;
const Header = styled.p`
font-size: 15px;
`;
const Options = styled.div`
display: flex;
margin-bottom: 5px;
`;
const Option = styled.div`
display: flex;
align-items: center;
border-bottom: 1px solid #d8d8d8;
`;
const FirstOption = styled(Option)`
justify-content: flex-end;
`;
const Text = styled.p`
font-size: 15px;
margin: 4px 0;
`;
const Left = styled.div`
flex: 1;
margin-right: 5px;
`;
const Right = styled.div`
flex: 1;
margin-left: 5px;
`;
<Wrapper>
<Header>Choose your teams</Header>
<Options>
<Left>
<input type="text" />
{teams.map(currency => (
<FirstOption>
<Text>{team}</Text>
</FirstOption>
))}
</Left>
<Right>
<input type="text" />
{teams.map(team => (
<Option>
<Text>{team}</Text>
</Option>
))}
</Right>
</Options>
</Wrapper>
This is what its looks like
This is what it should look like, but with the input boxes.
You can do this by add
const Input = styled.input`
width: 100%;
box-sizing: border-box;
`;
and change
<input type="text" /> to <Input type="text" />
I fix this here https://codesandbox.io/s/xv93wl893z
import React from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";
const Wrapper = styled.article`
width: 200px;
background: grey;
text-align: center;
padding: 12px 0 8px 0;
`;
const Header = styled.p`
font-size: 15px;
`;
const Options = styled.div`
display: flex;
margin-bottom: 5px;
`;
const Option = styled.div`
display: flex;
align-items: center;
border-bottom: 1px solid #d8d8d8;
`;
const FirstOption = styled(Option)`
justify-content: flex-end;
`;
const Text = styled.p`
font-size: 15px;
margin: 4px 0;
`;
const Left = styled.div`
flex: 1;
margin-right: 5px;
`;
const Right = styled.div`
flex: 1;
margin-left: 5px;
`;
const Input = styled.input`
width: 100%;
box-sizing: border-box;
`;
const teams = ["Liverpool", "Chelsea", "Fulham"];
function App() {
return (
<Wrapper>
<Header>Choose your team</Header>
<Options>
<Left>
<Input type="text" />
{teams.map(team => (
<FirstOption key={team}>
<Text>{team}</Text>
</FirstOption>
))}
</Left>
<Right>
<Input type="text" />
{teams.map(team => (
<Option>
<Text>{team}</Text>
</Option>
))}
</Right>
</Options>
</Wrapper>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);