How to set div's width equal to another div using sass/css?

Question

I have first element:

 <div layout="column" layout-align="start center" class="focusBox flex "></div>

it's css:

.focusBox {
 margin-top: 2%;
 border: 1px solid $alto;
 height: calc(100vh - 182px);
 background-color: $white;
}

and second element:

<div flex class="subFolderBox" ></div>

it's css:

.subFolderBox {
  margin-bottom: 1%;
  border: 1px solid $alto;
}

How to set width of first element to second using sass or css?

Answer 1

im not sure about css/scss but if you prefer with jquery you can do it like this

$(document).ready(function() {
  $(".second_div").css({
    'width': ($(".first_div").width() + 'px')
  });
});

.second_div,
.first_div {
  border: 1px solid black;
  padding: 2px 4px;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="first_div">First Div some text</div>
<div class="second_div">Second.width </div>

Answer 2

You can use display: inline-grid with a wrapper. No javascript needed. The columns are exactly equal.

.second_div,
.first_div {
  border: 1px solid black;
  padding: 2px 4px;
  display: inline-block;
}

.wrapper {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
}

<div class="wrapper">
  <div class="first_div">A very very very very long text</div>
  <div class="second_div">A word</div>
</div>

Answer 3

sass

$width:100px;

.focusBox {
  width: $width;
}

.subFolderBox {
  width: $width;
}

or css

.focusBox, .subFolderBox {
  width: 100px;
}