Vertically aligning divs around a floated left div

user_886026 0
Viewed 35

3 divs

Is there a way in css to align 3 divs (as shown), where the first is floated left and the container height = that div height (+ padding), and the second and third combined are vertically aligned in the container?

I tried this but couldn't quite get there.

.x {
  width: 100%;
  height: 56px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.x> :nth-child(1) {
  display: block;
  float: left;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: solid 1px #333333;
  margin: 4px 16px 4px 4px;
}

.x> :nth-child(2) {
  font-size: 12pt;
}

.x::after {
  content: '';
  width: 100%;
}

.x> :nth-child(3) {
  font-size: 10pt;
  font-weight: 600;
  order: 1;
}
<div class="x">
  <div></div>
  <div>Line 1</div>
  <div>Line 2</div>
</div>

I'd prefer to drop the sizing from the first div and allow that to happen automatically if possible

css html
2 Answers

You just needed to wrap your last two divs in a container.

Here is the working solution. https://jsfiddle.net/manoj1234/aqLy97wb/

.x {
  width: 100%;
  height: 56px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.x> :nth-child(1) {
  display: block;
  float: left;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: solid 1px #333333;
  margin: 4px 16px 4px 4px;
}

.x> :nth-child(2) {
  font-size: 12pt;
}

.x::after {
  content: '';
  width: 100%;
}

.x> :nth-child(3) {
  font-size: 10pt;
  font-weight: 600;
  order: 1;
}
<div class="x">
  <div></div>

  <div id="col-2-container">
    <div>Line 1</div>
    <div>Line 2</div>
  </div>

</div>

user_51081610

Just wrap the last two divs in another div

.x {
  width: 100%;
  height: 56px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.x> :nth-child(1) {
  display: block;
  float: left;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: solid 1px #333333;
  margin: 4px 16px 4px 4px;
}

.x> :nth-child(2) {
  font-size: 12pt;
}

.x::after {
  content: '';
  width: 100%;
}

.x> :nth-child(3) {
  font-size: 10pt;
  font-weight: 600;
  order: 1;
}
<div class="x">
  <div></div>
  <div>
    <div>Line 1</div>
    <div>Line 2</div>
  </div>
</div>

user_63283280
Related