change position of boxes in styled-component

I have a bunch of grids which I would like to form them a way as I intended to do. Here is a picture of how they look now:

What I would like to do is to move "CL1" and "Author" in parallel but after "commiter 1". And then followed by "CL2" and "CL3" in linear order like they are now. My code is as following:

import { React } from "react";
import styled from "styled-components";
function App() {

  return (
    <>
      <Input placeholder="commiter 1" />
      <Input placeholder="Author" size="2em" />
      <div>
        <Input placeholder="CL1" />
      </div>
      <Input placeholder="CL2" />
      <Input placeholder="CL3" />
    </>
  );
}

export default App;

const Input = styled.input.attrs(props => ({
  // we can define static props
  type: "text",

  size: props.size || "1em",
}))`
  color: palevioletred;
  font-size: 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;

  margin: ${props => props.size};
  padding: ${props => props.size};
`;

I am just started with CSS styling, and trying with styled-component as of now. Any idea on which tutorial I should look up into, or suggestions to other CSS tool would be appreciated as well!