Search code examples
htmlcssposition

CSS Positioning - Div in an inline-block row Jumping Down

I've created this JSFiddle to illustrate how I want the inline-blocks to line up.

<div class="entry">
  <div class="title">Hello</div>
  <div class="divider">&nbsp;</div>
  <div class="content">This is some content that goes down to the next level when it should actually stay in the same place, just create a new line right below where it was supposed to start.</div>
</div>

.entry {
  margin-bottom: 40px;
  div {
    display: inline-block;
  }
  .divider {
    width: 0;
    border-left:1px black solid;
  }
}

In the third example of the JSFiddle, when the text overflows, it creates a new line the whole way to the left of the parent div, when I expected it to start right below itself.

What am I missing here?

Update

After trying some of the suggested methods, I came up with this JSFiddle which does address the content box problem, but, the .title now changes it's width and won't keep the assigned widht. How do I fix that problem?

Solution

  • do you want something like this?
    just edit your css
    see: https://jsfiddle.net/fmwd3x7m/9
    ... and you have to open and close yours keys correctly

    .entry {
    margin-bottom: 40px;
  }
 div {
    display: flex;
  }
.divider {
    width: 0;
    border-left:1px black solid;
  }