How to align div in a specific position?

Issue

.test1 {
  border: 2px solid black;
  height: 220px;
  width: 390px;
}

.test2 {
  border: 2px solid black;
  height: 220px;
  width: 390px;
}

.random-content {
  flex: 1 1 auto;
  text-align: justify;
  font-weight: 700;
  margin-top: 20%;
  margin-right: 150px;
}

.main-container {
  background-color: #fff;
  margin: 30px;
  display: flex;
  flex-direction: row;
  height: 100%;
  margin-top: 2%;
  margin-right: 27px;
  margin-left: 27px;
  max-height: 100%;
  max-width: 100%;
}

<div class="main-container">
<div class="test1">test1</div> //div is moving to right side, when random content is dis-appear 
<div class="test2">test2</div>  //div is moving to right side, when random content is dis-appear 
<div class="random-content">random content</div> //my random-content, when click checkbox "content" will disappear
</div>

I am having css issue like,

Initially test1, test2 , random-content div's are at left side. and I am having functionality on random content like, when checkbox click content will disappear. So here comes problem. When content is dis-appear with click event, then test1, test2 div's are changing positions to right.

Solution

Make use of max-width in your scenario, so that width of 1st and 2nd div never goes out of a certain width.

But, this is not the reason why Flexbox was introduced, or I don't understand if you dont want auto-adjustment of the 2-div-boxes, then why are you using Flexbox at all?

Take 2 divs and make them display:inline-block and give them widths. Why are you making Flexbox then? That is used for auto-adjustment only, the thing it is doing itself, and you say its a problemo!

$(document).ready(function(){
  $("#check1").click(function(){
      $(".random-content").hide();
  });
});

.test1 {
  border: 1px solid black;
  height: 220px;
  width: 100px;
  max-width: 100px;
}

.test2 {
  border: 1px solid black;
  height: 220px;
  width: 100px;
  max-width: 100px;
}

.random-content {
  flex: 1 1 auto;
  text-align: justify;
}

.main-container {
  background-color: #fff;
  margin: 30px;
  display: flex;
  flex-direction: row;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="main-container">
  <div class="test1">test1</div> 
  <div class="test2">test2</div>  
  <div class="random-content">random content //my random-content, when click checkbox "content" will disappear</div> 

</div>

<hr/>
<input type="checkbox" id="check1"> Click-Me</input>

Answered By - Deadpool