put text on left side, image on the other one [closed] - html

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 21 days ago.
Improve this question
I want to have text on the left side of the useres screen and on the right side and Image. Look at the prototype i provided![enter image description here][1]
I can't find a solution pls help
I cant upload images, but heres a link to it
https://photos.app.goo.gl/97ZLoYcLBsVsRnjc6
I tried to do it with floats. But it didnt work out, since the button would just be way to far away from the text. The Image shouldt take away any space, it should display on the right side

Answer 1

We can use flex in this case
Refer CSS flex for further changes >> CSS Flex
* {
padding: 0;
margin: 0
}
.container {
display: flex;
justify-content: space-around;
align-items:center;
background-color: black;
color: white;
height:100vh
}
.container-button {
border: none;
background-color: white;
color: black;
padding: 0px 20px;
}
.container-img {
height: 100px;
width: 200px;
}
<div class="container">
<div class="container-text">
<h2>Hello World</h2>
<h4>This is some Text</h4>
<button class="container-button">button</button>
</div>
<img class="container-img" src="https://via.placeholder.com/200x100/FFFFFF/000000">
</div>

Answer 2

You can do something like this:
.container{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.container-right-side img{
margin-right: 2rem;
max-width: 60vw;
width: 100%;
}
.container-left-side{
margin-left: 2rem;
}
#media screen and (min-width: 0px) and (max-width: 600px){
.container{
flex-direction: column;
}
.container-left-side{
margin-left: 0;
}
}
<div class="container">
<div class="container-left-side">
<h2>Hello World</h2>
<h4>This is Some text</h4>
<button>button</button>
</div>
<div class="container-right-side">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" />
</div>
</div>

Answer 3

You can use something like this:
.container {
display: flex;
justify-content: space-between;
padding: 70px;
background-color: black;
}
.text {
display: flex;
flex-direction: column;
justify-content: center;
/* align-items: center; */
width: 50%;
padding: 50px;
color: white;
}
.image {
width: 50%;
}
img {
width: 100%;
height: auto;
border: 1px solid white;
}
button {
max-width: 100px;
}
<div class="container">
<div class="text">
<h1>Hello World</h1>
<p>This is Some Text</p>
<button>Button</button>
</div>
<div class="image">
<img src="https://via.placeholder.com/300 " alt="Image">
</div>
</div>