How to Place Div Side by Side

 <div style="width: 100%; overflow: hidden;">
     <div style="width: 600px; float: left;"> Left </div>
     <div style="margin-left: 620px;"> Right </div>
</div>

How to put divs side by side?

You are mixing up several different style attributes.

You have defined CSS classes, but are trying to use them to target an Element Id attribute.

.try { float: right;}
.side { float: left; }

You can change your CSS to target the element Id instead.

#try { float: right;}
#side { float: left; }

You are also using using bootstrap classes and have specifically chosen one for a responsive layout (using the container-fluid class). By defining a div as a row and giving the elements in that div column classes, they will float appropriately, based on the total of 12 columns.

Finally, you contradict the bootstrap classes by then setting explicit widths on your divs. You can have 1 or the other. You should not do both.

Until you decide on using bootstrap OR using hard coded widths, it will not layout correctly.

HTML put two div side by side

Put your divs into common parent, and then you have to use css. For the left div, add style="float: left". For the second one write style="float: right".

Two divs side by side - Fluid display

Using this CSS for my current site. It works perfect!

#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
} 

Align div elements side by side

Apply float:left; to both of your divs should make them stand side by side.

how to place two divs side by side

Try using bootstrap grid's. It can be something like this.

<div class="col-sm-12">
    <div class="col-sm-6">
        <img src="http://www.thebrandbite.com/wp-content/media/2015/07/apple-7.jpg" width="30%">
    </div>
    <div class="col-sm-6">
        <img src="https://d3nevzfk7ii3be.cloudfront.net/igi/KRLMkuaBjm5mKDDP" width="30%">      
    </div>
</div>

Demo

Place div side by side

"I need output text will be in one line." Here's everything in one line. Basically, all you needed was white-space: nowrap. I removed the extra HTML of the divs wrapping each li since that was invalid HTML and wasn't necessary. If you need divs, put them inside the lis. I'd make them spans though.

.col-lg-4>ul {
  overflow-x: scroll;
  width: 100%;
  display: flex;
}

.category {
  border: 0;
  padding: 0;
  margin-right: 30px;
  font-size: 15px;
  display: inline-block;
  white-space: nowrap;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />

<div class="col-lg-4">
  <ul>
    <li class="category" id="1">Hair</li>
    <li class="category" id="3">Skin Care</li>
    <li class="category" id="4">Makeup</li>
    <li class="category" id="5">Body Treatments</li>
    <li class="category" id="6">Sports Massage</li>
    <li class="category" id="7">Physiotherapy</li>
    <li class="category" id="8">Intensive Healing Pedicure</li>
    <li class="category" id="9">Pedicure Refresher</li>
    <li class="category" id="10">Therapeutic Pedicure</li>
  </ul>
</div>

.div1
{
    position: relative;
    border: 1px solid <#=styles["subduedBorderColor"]#>;
    background-color: <#=styles["controlBackgroundColor"]#>;
    height: 24px;
    padding: 3px;
    margin: 6px 2px 0 16px;
    -ms-flex: auto; /* IE 10 */
    flex: auto;
}

.main-container
{
    display: -ms-flexbox; /* IE 10 */
    display: flex;
}

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            ONE
        </div>
        <div class="col-xs-6">
            TWO
        </div>
    </div>
</div>