Pelle Pelle - 1 month ago 7x
Less Question

Scale date-picker on mobile based on set margin

I need a set margin around two date-pickers. I need to scale the date-pickers horizontally according to the screen width. The dash should always be in the center of the container. I've tried solving it by using percentages, but I have no idea how to set the margins as well. Both date-pickers need to scan evenly and always be of equal size. Do anyone have an idea on how to solve this in a neat way?

Scaled by margin


display: flex will work for this, see fiddle

Hard to tell what you are asking but here is another approach

or this:

Pick one, and I will explain how it was done.

sample html

<div class="wrapper">
  <div class="div1">

  <div class="line">

  <div class="div2">


Sample css

.wrapper {
  width: 100%;
  height: 50px;
  border-style: dotted;
  display: flex;
  justify-content: space-between;
.line {
  width: calc(100% - 320px);
  border-bottom: solid;
  border-bottom-width: 1px;
  margin-bottom: 25px;

.div2 {
  width: 100px;
  height: 40px;
  border-style: solid;
  border-color: red;
  margin: 0 30px;