div display flex text alling [closed] - html

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
hello the subject I couldn't do about css is this, how can i draw this in the image?
what I want to do is to copy the image with html and css.
I tried with display flex and but I couldn't
.channel-left {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
}
.channel-description {
width: auto !important;
}
<div class="channel-left mb-5">
<div class="channel-description">
<div class="channel-img">
<img src="img.jpg" class="img-circle">
</div>
<div class="channel-title">
<p>title</p>
<p>blabla</p>
</div>
</div>
<div class="channel-subs">
<button type="button" class="btn btn-large btn-outline-danger rounded"><i class="fa fa-heart"></i> Like</button>
</div>
</div>

Answer 1

.container {
display: flex;
background: black;
color: white;
align-items: center;
padding: 10px;
}
.description {
flex: 1 1 auto;
display: flex;
align-items: center;
}
.title {
padding: 10px;
}
.img {
border-radius: 90%;
overflow: hidden;
width: 50px;
height: 50px;
}
.subs {
flex: 0 1 auto;
}
<div class="container">
<div class="description">
<div class="img">
<img src="https://placekitten.com/50/50" class="img-circle">
</div>
<div class="title">
<p>title</p>
<p>blabla</p>
</div>
</div>
<div class="subs">
<button type="button" class="btn btn-large btn-outline-danger rounded">Like</button>
</div>

Answer 2

just give the simple flex css to parent, put all three items in same div and then give margin-left auto to last item to move it to right,
Rest style your typography and colors.
* {margin: 0; padding: 0; box-sizing: border-box;}
.channel-description {
display: flex;
align-items: center;
padding: 10px;
margin: 20px;
border: 1px solid #ddd;
}
.channel-subs {margin-left: auto;}
.channel-title {margin-left: 10px;}
<div class="channel-left mb-5">
<div class="channel-left mb-5">
<div class="channel-description">
<div class="channel-img">
<img src="img.jpg" class="img-circle">
</div>
<div class="channel-title">
<p>title</p>
<p>blabla</p>
</div>
<div class="channel-subs">
<button type="button" class="btn btn-large btn-outline-danger rounded"><i class="fa fa-heart"></i> Like</button>
</div>
</div>
</div>

Answer 3

Something like this would work:
.channel-left {
background: #1f2227;
border-radius: 15px;
color: white;
max-width: 400px;
padding-left: 20px;
padding-right: 20px;
}
.channel-left,
.channel-description {
display: flex;
align-items: center;
justify-content: center;
}
.channel-img {
flex-basis: 80px;
}
.channel-title,
.channel-description{
flex-basis: 100%;
}
<div class="channel-left mb-5">
<div class="channel-description">
<div class="channel-img">
<img src="img.jpg" class="img-circle">
</div>
<div class="channel-title">
<p>title</p>
<p>blabla</p>
</div>
</div>
<div class="channel-subs">
<button type="button" class="btn btn-large btn-outline-danger rounded"><i class="fa fa-heart"></i> Like</button>
</div>
</div>

Answer 4

I know you've already accepted an answer, however I want to post my own:
* {
font-family: sans-serif;
}
.channel-left {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
background: #222222;
padding-left: 10px;
padding-top: 10px;
border-radius: 10px;
}
.channel-description {
width: auto !important;
display: inherit;
flex-basis: 70%;
}
.img-circle {
border-radius: 50px;
border: 2px solid gray;
width: 50px;
}
.channel-info {
padding-left: 5px;
}
.btn-outline-danger {
background: #555555;
border-radius: 50px;
border: 2px solid gray;
height: 30px;
width: 150px;
color: white;
cursor: pointer;
margin-top: 25px;
}
.channel-subs {
display: inline-block;
float: right;
}
p {
color: white;
}
.channel-title {
font-weight: bold;
}
<div class="channel-left mb-5">
<div class="channel-description">
<div class="channel-img">
<img src="https://www.chiquita.com/wp-content/uploads/2019/12/Chiquita_Banana_Class_Extra_Yellow.jpg" class="img-circle">
</div>
<div class="channel-info">
<p class="channel-title">Title</p>
<p class="channel-desc">blabla</p>
</div>
</div>
<div class="channel-subs">
<button type="button" class="btn btn-large btn-outline-danger rounded"><i class="fa fa-heart"></i> Like</button>
</div>
</div>