CSS - flex items to be side by side with flex-direction row (parent element)

Question

const containerStyles = css`
  display: flex;
  flex-direction: row; /* Change to row */
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
`;

const buttonStyles = css`
  width: 20%;
`;

const inputStyles = css`
  width: 80%;
`;

 

Answer 1

Or, simpler version:

const containerStyle = css`
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
`;

const mainCompStyle = css`
  flex: 70%;
`;

const sideComStyle = css`
  background: #eee;
  flex: 30%; 
`;