First, we would want to create a skeleton UI of the application, and then we can create a store, connect the UI to the store, make the app more functional, and add CSS styling. The Main component will create two components, namely, DetailsSection and PostsSection.

function DetailsSection(props) {
  return (<div></div>);
}

function PostsSection(props) {
  return (<div></div>);
}

function Main(props) {
  return (
    <div id="main">
      <DetailsSection />
      <PostsSection />
    </div>
  );
} 

In our final product, the DetailsSection and PostsSection will be as follows:

We will create very basic versions of DetailsSection and PostsSection, which we will improve later. The code should be something like this.

function DetailsSection(props) {
  return (
    <div>
      <div>
        <h2>Profile</h2>
        
        <label htmlFor="name">Name: </label>
        <input id="name" />
        <button>Change</button>
 
        <p>Posts: </p>
      </div>
 
      <div>
        <h2>App</h2>
 
        <p>Users: </p>
        <p>Total Posts: </p>
      </div>
    </div>
  );
}
 
function PostsSection(props) {
  return (
    <div>
      <textarea />
      <button>Post</button>
    </div>
  );
}

With the above code, our app should look like this:

We need the DetailsSection and PostsSection shown in the form of two columns, for that, we will create a grid using CSS. Create a new index.css file in the src folder and write the code for creating a grid inside the #main element.

#main {
    display: grid;
    grid-template-columns: 30% auto;
    grid-gap: 1px;
}

We can import the CSS files using the JS import statements in index.js:

import './index.css'

Now the app should be looking something like this: