I recently built a React component that consists of two columns. In the left column, there's a calendar while the right column contains some text along with an input and select field.
However, I noticed that when I resize the window, the elements on the right start moving towards the left, eventually overlapping with the calendar.
I'm now trying to find a solution where the content remains intact and gracefully adjusts as the window size decreases, rather than overlapping each other.
https://codesandbox.io/s/blue-bash-32xik?fontsize=14
import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Col, Row } from "antd";
import styled from "styled-components";
import "antd/dist/antd.css";
import Calendar from "./Calendar";
class App extends React.Component {
render() {
return (
<div className="App">
<Row>
<Col span={12}>
<Calendar className="myClassname" />
</Col>
<Col span={12}>
Selected Date: <input />
<TimeSelection>
Available Times:
<select size={3}>
<option>AM</option>
<option>PM</option>
<option>ANY</option>
</select>
</TimeSelection>
</Col>
</Row>
</div>
);
}
}
const TimeSelection = styled.div`
margin-top: 10%;
`;
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);