How set dynamic margin? - css

Question

i have one div and three child div, check out the code below
<div class="parent">
<div class="child">
<icontag />
<texttag />
</div>
<div class="child">
<icontag />
<texttag />
</div>
<div class="child">
<icontag />
<texttag />
</div>
</div>
each child tag composed of icontag and texttag and text tag is of dynamic height.
but, each icon tag margin must be same, even if text tag height is different.
for more explanation, refer to the picture.
as the above picture, the last text is multiline. so, last child tag height is diffent from other tags.
how can I do that?

Answer 1

Here is an example with grid and flexbox.
Try this, it might fit your needs
.child {
display: flex;
align-items: center;
}
.parent {
display: grid;
grid-template-rows: 33% 33% 33%;
}
.child .icon {
border-radius: 50%;
border: 1px solid blue;
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 20px;
}
.child p {
max-width: 100px;
}
.wrapper {
display: flex;
align-items: center;
}
.same {
margin-right: 30px;
}
<div class="wrapper">
<p class="same">Same height</p>
<div class="parent">
<div class="child">
<div class="icon">1</div>
<p>Bla bla bla bla bla bla bla bal dsfafda af afas fa faf af</p>
</div>
<div class="child">
<div class="icon">1</div>
<p>Bla bla bla</p>
</div>
<div class="child">
<div class="icon">1</div>
<p>Bla bla bla bla bla bla bla bal dsfafda af afas fa faf af</p>
</div>
</div>
</div>

Answer 2

Try adding max-height to all child div..
.child {
--
--
max-height: 300px; // give max height as per your design
overflow-y: auto;
}

Answer 3

You can use display: flex on child items and align-items: center to vertically center the content.
Then use padding property (or margin could work as well) to have some space between .child items as in the following snippet.
.child{
display: flex;
flex-direction: row;
align-items: center;
width: 500px;
padding: 15px 0;
}
.icon{
width: 30px;
height: 30px;
border-radius: 100%;
border: 2px solid #0000ff;
display: flex;
align-items:center;
justify-content: center;
margin-right: 15px;
}
.text{
flex: 1;
}
.child.third .icon{
width: 50px;
height: 50px;
}
<div class="parent">
<div class="child first">
<div class="icon">1</div>
<div class="text">Foo bar baz</div>
</div>
<div class="child second">
<div class="icon">2</div>
<div class="text">Foo bar baz</div>
</div>
<div class="child third">
<div class="icon">3</div>
<div class="text">Foo bar baz<br/>Foo bar baz</div>
</div>
<div class="child fourth">
<div class="icon">4</div>
<div class="text">Foo bar baz<br/>Foo bar baz</div>
</div>
</div>
But note that, if the texts are much longer than the icons, it could break the layout and you need to give static height to child items. But this way texts may overlap.

Answer 4

Try this :
<div class="parent">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 child">
<icontag />
<texttag />
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 child">
<icontag />
<texttag />
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 child">
<icontag />
<texttag />
</div>
</div>
You can set padding for child class.
padding: 10px;