HTML/CSS need help creating an underline between two elements

Question

I am building a restaurant website and right now I am trying to create Opening Hours part. However, I do not know how to align the hours perfectly with html/css.

here is a sample of my code:

 <Container className="footer-top">
          <Col className="footer-top-wrapper">
            <Row className="footer-section-title">Opening Hours</Row>
            <Row>
              <span>Monday</span>
              <span className="line"></span>
              <span className="hours">6:00 - 3:00</span>
            </Row>
            <Row>
              <span>Tuesday</span>
              <span className="line"></span>
              <span className="hours">6:00 - 8:00</span>
            </Row>
            <Row>
              <span>Wednesday</span>
              <span className="line"></span>
              <span className="hours">6:00 - 8:00</span>
            </Row>
            <Row>
              <span>Thursday</span>
              <span className="line"></span>
              <span className="hours">6:00 - 8:00</span>
            </Row>
            <Row>
              <span>Friday</span>
              <span className="line"></span>
              <span className="hours">6:00 - 8:00</span>
            </Row>
            <Row>
              <span>Saturday</span>
              <span className="line"></span>
              <span className="hours">6:00 - 8:00</span>
            </Row>
            <Row>
              <span>Sunday</span>
              <span className="line"></span>
              <span className="hours">6:00 - 3:00</span>
            </Row>
          </Col>
          <Col className="footer-top-wrapper">
            <Row className="footer-section-title">CONTACT US</Row>
            <Row>(415) 325-5980</Row>
          </Col>
        </Container>

The goal is to create something like this with the underline:

Thank you for your help.

Please show your attempted css and rendered html otherwise this question is too broad and off topic for SO — Pete, Sep 03 '19 at 08:58
This seems not to be a `react` question, but a HTML/CSS question. In order to help you we need the rendered HTML and the used CSS you have — yunzen, Sep 03 '19 at 09:06
First of all you should not be having Rows inside Cols. It should be Cols inside Rows! — djolf, Sep 03 '19 at 09:06

Sebastian Heinrich · Answer 1 · 2019-09-03T10:03:13.573

I would solve this with flexbox and adapt the class .line to the width of the remaining content.

For more information I would recommend the flexbox guide by css-tricks.

row {
  display: flex;
}

row span.line {
  flex: 1;
  border-bottom: 1px solid #000;
}

<Row class="footer-section-title">Opening Hours</Row>
<Row>
  <span>Monday</span>
  <span class="line"></span>
  <span class="hours">6:00 - 3:00</span>
</Row>
<Row>
  <span>Tuesday</span>
  <span class="line"></span>
  <span class="hours">6:00 - 8:00</span>
</Row>
<Row>
  <span>Wednesday</span>
  <span class="line"></span>
  <span class="hours">6:00 - 8:00</span>
</Row>
<Row>
  <span>Thursday</span>
  <span class="line"></span>
  <span class="hours">6:00 - 8:00</span>
</Row>
<Row>
  <span>Friday</span>
  <span class="line"></span>
  <span class="hours">6:00 - 8:00</span>
</Row>
<Row>
  <span>Saturday</span>
  <span class="line"></span>
  <span class="hours">6:00 - 8:00</span>
</Row>
<Row>
  <span>Sunday</span>
  <span class="line"></span>
  <span class="hours">6:00 - 3:00</span>
</Row>

score 1 · Answer 2 · edited Sep 03 '19 at 10:12

Is this what you are trying to do ? make a flex container and at the line class use border bottom.
Hope it helps

.line {
  width: 20vw;
  border-bottom: 1px solid black;
}
.row {
  display: flex;
}
.day {
  width: auto;
}

<Container class="footer-top">
  <Col class="footer-top-wrapper">
  <Row class="footer-section-title">Opening Hours</Row>
  <br>
  <Row class="row">
    <span class="day">Monday</span>
    <span class="line"></span>
    <span class="hours">6:00 - 3:00</span>
  </Row><br>
  <Row class="row">
    <span class="day">Tuesday</span>
    <span class="line"></span>
    <span class="hours">6:00 - 8:00</span>
  </Row>
  <br> 
  <Row class="row">
    <span class="day">Wednesday</span>
    <span class="line"></span>
    <span class="hours">6:00 - 8:00</span>
  </Row>
  <br>
  <Row class="row">
    <span class="day">Thursday</span>
    <span class="line"></span>
    <span class="hours">6:00 - 8:00</span>
  </Row>
  <br>
  <Row class="row">
    <span class="day">Friday</span>
    <span class="line"></span>
    <span class="hours">6:00 - 8:00</span>
  </Row>
  <br>
  <Row class="row">
    <span class="day">Saturday</span>
    <span class="line"></span>
    <span class="hours">6:00 - 8:00</span>
  </Row>
  <br>
  <Row class="row">
    <span class="day">Sunday</span>
    <span class="line"></span>
    <span class="hours">6:00 - 3:00</span>
  </Row>
  <br>
  </Col>
  <Col class="footer-top-wrapper">
  <Row class="footer-section-title">CONTACT US</Row>
  <Row>(415) 325-5980</Row>
  </Col>
</Container>

I really don't know much about reactjs, but isn't that assigning styles globally? Meaning, will all rows and cols be affected? If so, is not a good practice.. Is there a way to target just that particular id or class... on css, its just `.class` or `#id`, but not sure how its done for reactjs.. — Gosi, Sep 03 '19 at 09:13
@Gosi for reactjs, use `className="someclass"` to specify classes. — djolf, Sep 03 '19 at 09:15
@Gosi there is class on react js too all the class has to be changed to classname and it will work — strek, Sep 03 '19 at 09:17
@djolf @XxSTREKxX But how to call those in? Like in css, `class="test"` is called by `.test` . How to call a `className="test"` ? — Gosi, Sep 03 '19 at 09:20

score 1 · Answer 3 · edited Feb 24 '22 at 23:19

Try with this code:

    .index-menu {
        display: flex;
        justify-content: space-between;
    }
    .index-menu hr {
        display: inline-block;
        width: calc(100% - 20px);
        text-align: center;
    }
    .index-menu span {
        display: inline-flex;
    }
    .index-menu span.hours {
        white-space: nowrap;
    }
    .index-menu span.line{
        width: 100%;
    }

        <Container className="footer-top">
        <Col className="footer-top-wrapper">
        <Row className="footer-section-title">Opening Hours</Row>
        <Row>
            <div className="index-menu">
                <span>Monday</span>
                <span className="line">
                    <hr></span>
                <span className="hours">6:00 - 3:00</span>
            </div>
        </Row>
        <Row>
            <div className="index-menu">
                <span>Tuesday</span>
                <span className="line">
                    <hr></span>
                <span className="hours">6:00 - 8:00</span>
            </div>
        </Row>
        <Row>
            <div className="index-menu">
                <span>Wednesday</span>
                <span className="line">
                    <hr></span>
                <span className="hours">6:00 - 8:00</span>
            </div>
        </Row>
        <Row>
            <div className="index-menu">
                <span>Thursday</span>
                <span className="line">
                    <hr></span>
                <span className="hours">6:00 - 8:00</span>
            </div>
        </Row>
        <Row>
            <div className="index-menu">
                <span>Friday</span>
                <span className="line">
                    <hr></span>
                <span className="hours">6:00 - 8:00</span>
            </div>
        </Row>
        <Row>
            <div className="index-menu">
                <span>Saturday</span>
                <span className="line">
                    <hr></span>
                <span className="hours">6:00 - 8:00</span>
            </div>
        </Row>
        <Row>
            <div className="index-menu">
                <span>Sunday</span>
                <span className="line">
                    <hr></span>
                <span className="hours">6:00 - 3:00</span>
            </div>
        </Row>
        </Col>
        <Col className="footer-top-wrapper">
        <Row className="footer-section-title">CONTACT US</Row>
        <Row>(415) 325-5980</Row>
        </Col>
    </Container>

HTML/CSS need help creating an underline between two elements

3 Answers3