Don't Extend Lines on React Styled Components

Question

I have a problem on the lines between the OR. I need it not to be extended to its beginning/end.

Please see codesandbox here CLICK HERE

EXPECTED OUPUT

CODE

const OR = styled.div`
  display: flex;
  flex-direction: row;  
  color: #5C5C5C;
  font-size: 14px;
  &:before, &:after {
    content: "";
    flex: 1 1;
    border-bottom: 1px solid;
    border-color: #A1A1A1;
    margin: auto;
  }
  &:before {
    margin-right: 10px
  }
  &:after {
    margin-left: 10px
  }
}
`;

Answer 1

 &:before, &:after {
    content: "";
    width:30%;
    height: 1px;
    background-color: #A1A1A1;
    margin: auto;

Put this instead of the border.