Putting two divs tags next to each other

import batta from '../../Images/batta.png';
import onlineAuction from '../../Images/onlineAuction.png';
import './LandingScreen.css';
import {useState} from 'react';
import {Link} from 'react-router-dom';
import {Container,Row, Col} from 'react-bootstrap';
const LandingScreen = ()=>{

    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");

  
    return(
       <Container>
           <Row>
               <Col>
                    <img src ={batta}/>
               </Col>
               <Col>
                    <form style={{marginLeft:300}}>
                        <div className="modal-dialog" role="document" style={{"display":"flex"}}>
                            <div className="modal-content">
                                <div className="modal-header">
                                    <h5 className="modal-title">Sign In</h5>
                                </div>
                                <div className="modal-body">
                                    <form>
                                        <fieldset  style={{maxWidth:500 , marginLeft:20}}> 
                                            <div className="form-group" style={{marginTop :25}}>
                                                <label for="exampleInputEmail1" className="form-label">Email address</label>
                                                <input type="email" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"
                                                value={email} onChange={(e)=> setEmail(e.target.value)}/>
                                            </div>
                                            <div className="form-group" style={{marginTop :1}}>
                                                <label for="exampleInputPassword1" className="form-label mt-4">Password</label>
                                                <input type="password" className="form-control" id="exampleInputPassword1" placeholder="Password"
                                                value={password} onChange={(e)=> setPassword(e.target.value)}/>
                                            </div>
                                        </fieldset>
                                    </form>
                                </div>
                                <div className="modal-footer">
                                    <Link to ="/register" style={{marginRight:175}}>
                                        Don't have an account
                                    </Link>
                                    <button type="submit" className="btn btn-secondary" data-bs-dismiss="modal" >
                                        Log In
                                    </button>

                                </div>
                            </div>
                        </div>  
                    </form>
                </Col>
            </Row>
        
        </Container>
    );
};


export default LandingScreen;

#leftHalf{
    position: absolute;
    left: 0px;
    height: 100%;
    width: 63%

}

.image-container{
    width: 100px;
    display: flex;
    margin-top: 50px;
}

.rightHalf{
    width: 50%;
    position: absolute;
    right: 0px;
    height: 100%;
    
}