Проблемы с css flex и полями ввода

Question

У меня есть 2 списка рядом.Они хорошо выстраиваются, но когда я добавляю поля ввода, они не синхронизируются.Есть идеи, почему это происходит?Мой код ниже.А также скриншоты.

Здесь вы также найдете коды и поля .

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>

Вот как это выглядит

Вот как это должно выглядеть, но с полями ввода.

Answer 1

Вы можете сделать это, добавив

const Input = styled.input`
  width: 100%;
  box-sizing: border-box;
`;

и изменить

<input type="text" /> to <Input type="text" />

Я исправлю это здесь 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);

Answer 2

Вы можете добавить width: 100%; и box-sizing: border-box к <input>

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 teams = ["Liverpool", "Chelsea", "Fulham"];

function App() {
  return (
    <Wrapper>
      <Header>Choose your team</Header>      
        <Options>                 
          <Left>
          <input style={{ width: '100%', boxSizing: 'border-box'}} type="text" />
            {teams.map(team => (
              <FirstOption key={team}>
                <Text>{team}</Text>
              </FirstOption>
            ))}
          </Left>

          <Right>
            <input style={{ width: '100%', boxSizing: 'border-box' }} type="text" />
            {teams.map(team => (
              <Option>
                <Text>{team}</Text>
              </Option>
            ))}
          </Right>
        </Options>    
    </Wrapper>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);