Using <hr> tag, I'm trying to create vertical divider that can adjust its height relative to the element to the left. For instance, if I put vertical divider between images that have height of 100px, I want this divider to adjust its height to 100px automatically or if height of images were 50px then height of divider should be adjusted to 50px. So I thought I need to use "height: 100%" to get it working, but this only works if I set the height for the parent element in which I don't want. It would be inconvenient to ask consumer of this divider component to make sure set the height on parent element every time they use. Is it possible to get vertical divider to adjust height dynamically without setting the height on parent element? What would be the solution? Currently, this is what I tried so far. https://codesandbox.io/s/divider-component-4djtzv?file=/src/App.js:0-539

import "./styles.css";

function Divider() {
  return <hr className="divider-vertical" />;
}

export default function App() {
  return (
    <>
      <div style={{ height: "40px" }}>
        <h1 style={{ display: "inline-block" }}>Hello</h1>
        <Divider />
        <h1 style={{ display: "inline-block" }}>World</h1>
      </div>
      <div>
        <h4 style={{ display: "inline-block" }}>Hello</h4>
        <Divider />
        <h4 style={{ display: "inline-block" }}>There</h4>
      </div>
    </>
  );
}

.divider-vertical {
  position: relative;
  display: inline-block;
  height: 100%;
  margin: 0;
  vertical-align: middle;
  border-top: 0;
  border-left: solid #e7e7e7;
}

CodePudding user response：

one way can be to use border-right on first element of parent to do this

.parent *:first-child

.inline {
  display:inline-block;
}

.parent *:first-child {
  border-right: solid 1px black;
  padding-right: 5px;
}

<div >
  <h1 >Hello</h1>
  <h1 >World</h1>
</div>

<div >
  <h4 >Hello</h4>
  <h4 >There</h4>
</div>

CodePudding user response：

Single line of CSS:

div { display: flex; }

Example:

article {
  display: flex;
}

<article>
    <div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae vestibulum augue, id imperdiet ipsum. Pellentesque sodales ligula non dapibus porttitor. Donec malesuada turpis quis mi congue, id blandit enim euismod. Nulla laoreet mauris bibendum, ultrices mi ac, tristique sapien. In feugiat, arcu ac egestas mollis, nisl justo congue sapien, non tincidunt est nibh ac nibh. Aliquam vitae ligula at neque suscipit dapibus at sed ipsum. Mauris congue ipsum sit amet ex sodales, vel vehicula augue porta. Curabitur aliquam ex massa, porta tristique dui consectetur ut. Duis a justo ac sem gravida dapibus. In tortor tortor, fringilla ac nunc ac, aliquet euismod turpis. Pellentesque non blandit diam, eu ullamcorper diam. Duis mi est, euismod molestie sodales nec, porta vel libero.
</p>
<p>
Phasellus quis ante faucibus, lacinia mi eget, eleifend dui. Nullam est arcu, dignissim non dolor vel, facilisis lacinia sem. Nunc vitae metus porta, venenatis mi non, ullamcorper enim. Donec sit amet nunc lectus. Maecenas eu arcu posuere ex malesuada elementum vel ac ipsum. Curabitur sollicitudin dolor rhoncus sapien placerat rutrum. Morbi sed tempor urna, sed pharetra ipsum. Nunc eget lorem suscipit, viverra sem vel, sodales nisi. Pellentesque eu turpis dui. Nullam ut justo et ante rhoncus mollis a vel metus. Vestibulum dapibus quam vel ultrices pellentesque. Sed et placerat orci. Fusce varius massa purus, id porttitor magna pretium in. Donec gravida nulla risus.
</p>
<p>
Sed nunc ante, pulvinar a tincidunt ac, porttitor at massa. Phasellus porta sed lorem eu dapibus. Pellentesque quis aliquet ex. Nulla consequat, arcu vitae efficitur vehicula, nisi dolor tincidunt quam, volutpat congue massa leo id lectus. Aliquam sagittis ante sit amet ultricies venenatis. Quisque varius nec metus sit amet vulputate. Fusce sit amet ligula in purus bibendum ullamcorper in eget mauris. Aenean mattis ex ut molestie ornare. In mi odio, tristique id rhoncus ullamcorper, sodales non turpis. Sed posuere, magna sed semper auctor, neque est faucibus nisl, non aliquet risus ipsum vel augue. Pellentesque eu velit interdum urna volutpat sodales ac sit amet diam. Pellentesque vel malesuada risus, porttitor faucibus risus. In laoreet, nisl at eleifend rhoncus, sem mi pellentesque nisi, vitae sollicitudin nisi purus id nunc.
</p>
    </div>
    <hr>
    <div>
<p>
In dictum lectus elit, nec vestibulum neque tempus vitae. Nam eget convallis mauris. In hac habitasse platea dictumst. Duis condimentum quam vitae urna mattis, lobortis vulputate mi commodo. Donec et risus mi. Aliquam finibus pharetra velit et interdum. Proin ut lorem eu nulla faucibus facilisis ut quis quam. Fusce risus tortor, tristique sed bibendum ac, aliquam vitae enim. Proin malesuada laoreet sagittis. Integer euismod sagittis magna, quis vehicula mauris sodales vitae. Donec diam tellus, faucibus non tellus sed, venenatis lobortis augue. Mauris vestibulum odio non venenatis dictum. Proin faucibus, est dapibus commodo sollicitudin, eros justo auctor ligula, auctor sodales leo diam quis arcu. Vestibulum eget luctus dolor. Donec mauris orci, efficitur eu vehicula et, efficitur at nulla. Aliquam in tortor sed mi pretium malesuada in vel urna.
</p>
<p>
Proin congue lacus aliquet gravida mollis. Integer non ligula odio. Vestibulum feugiat tristique ante, eu feugiat ex dignissim eget. Ut congue urna eget ipsum consequat, vel porttitor nibh cursus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam laoreet urna sed ipsum volutpat lacinia. Mauris at eleifend ligula, eu sodales tellus. Pellentesque vitae laoreet sapien, sit amet congue sem.
</p>
    </div>
  </article>

This solution might clash with other style requirements that you have, but flexbox with some tweaks might still be a useful solution to look into.