Use Flexbox to create a cool and responsive text divider on your design. Note: --text-divider-gap is the variable to control spacing between the text and the lines. DEMO TEXT TITLE HTML < div class = "text-divider" > TEXT TITLE </ div > CSS . text - divider { display: flex; align - items: center; -- text - divider - gap: 1.5 rem; color: green; } . text - divider::before, . text - divider::after { content: "" ; height: 1 px; background - color: silver; flex - grow: 1 ; } . text - divider::before { margin - right: var( -- text - divider - gap); } . text - divider::after { margin - left: var( -- text - divider - gap); }