JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="date-picker">
  <button type="button" class="btn">
    <span class="start-date">2022.07.23</span>
    <i class="icon line-calendar" aria-hidden="true"></i>
  </button>
  <button type="button" class="btn">
    <span class="end-date">2022.07.23</span>
    <i class="icon line-calendar" aria-hidden="true"></i>
  </button>
</div>

SCSS

.date-picker {
  @include rem(margin-bottom, 24); 
  display: flex;
  justify-content: space-between; 
  align-items: center;
  .btn {
    @include rem(padding, 0 20 15 16);
    border-bottom: 1px solid #e5e5e5;
    width: 100%;
    justify-content: space-between;
    @include f15-r;
  & + .btn{
    @include rem(margin-left, 181:
    position: relative;
    &::before{
      content: '';
      display: block;
      position: absolute;
      @include: rem(top, clac (56% -15));
      @include rem(left, -13);
      transform: translateY (-50%);
      @include rem(width, 8);
      height: 1px; 
      background:#666;
    }
  }
}