How to add margin from last div class?

October 1, 2023

I have three div classes. something like this

.first {border: 1px solid #ccc; width: 800px}
.second {width:200px;float:left;}
.third {margin-left:10px}

<div class="first"><div class="second"><img src="https://dummyimage.com/200x300"></div><div class="third">test</div>

here second div shows from the left side. I want the third div class margin-left count from the second div class. is it possible?

>Solution :

You can easly make them stay next to each other using display: flex; at parent element
and add flex-shrink: 0; at image container to prevent it from lose width if sibling(element with text) is too big

.first
{
  border: 1px solid #ccc;
  width: 800px;
  display: flex;
}
.second
{
  width:200px;
  flex-shrink: 0;
}
.third
{
  margin-left:10px
}

<html>
<body>

<div class="first">
  <div class="second">
    <img src="https://dummyimage.com/200x300">
  </div>
  <div class="third">
    test
  </div>
</div>

</body>
</html>