Alignment from side to side

Question

I want to put both divs (green and red) aligned side by side as they are, but the green should be fixed aligned on the right, while the red line is aligned on the left, so I put the margin-left:0vw; to the green, and did not solve, what procedure should do to leave fixed to the red to the left, and the green to the right?

div.container {
        height: 100%;
        background: -webkit-linear-gradient(top, #088fad 20%, #00d5ff 100%);
    }

    div.titulo {
        font-size: 5vw;
        background-color: blue;
        text-align: center;
        padding: 3vw;
        position: relative;
    }

    div.op1 {
        width: 38%;
        display: inline-block;
        background-color: red;
        font-size: 3vw;
        text-align: center;
        padding: 5vw 0vw 5vw 0vw;
        min-width:40vw;
    }

    div.op2 {
        width: 38%;
        background-color: green;
        display: inline-block;
        margin-right: 0vw;
        font-size: 3vw;
        text-align: center;
        padding: 5vw 0vw 5vw 0vw;
        min-width:40vw;
    }

<div class="container">
    <div class="col-md-12"></div>
    <div class="titulo">O que você está procurando?</div>
    <div class="op1">Opção 1</div>
    <div class="op2">Oção 2</div>
</div>

Answer 1

Would that be it? In case, just add in div2 the property float:right;, so the div "floats" on the right. I hope I’ve helped!

div.container {
        height: 100%;
        background: -webkit-linear-gradient(top, #088fad 20%, #00d5ff 100%);
    }

    div.titulo {
        font-size: 5vw;
        background-color: blue;
        text-align: center;
        padding: 3vw;
        position: relative;
    }

    div.op1 {
        width: 38%;
        display: inline-block;
        background-color: red;
        font-size: 3vw;
        text-align: center;
        padding: 5vw 0vw 5vw 0vw;
        min-width:40vw;
    }

    div.op2 {
        width: 38%;
        background-color: green;
        display: inline-block;
        margin-right: 0vw;
        font-size: 3vw;
        text-align: center;
        padding: 5vw 0vw 5vw 0vw;
        min-width:40vw;
        float:right;
    }

<div class="container">
    <div class="col-md-12"></div>
    <div class="titulo">O que você está procurando?</div>
    <div class="op1">Opção 1</div>
    <div class="op2">Oção 2</div>
</div>

Answer 2

A simple and fast alternative is to use the flex-box space-between property, for example...

.container{
  display: flex;
  flex-direction: column;
}
.titulo {
   font-size: 5vw;
        background-color: blue;
        text-align: center;
        padding: 3vw;
        position: relative;
}
.ctnFlex{
  display: flex;
  justify-content: space-between;
}
 div.op1 {
        width: 38%;
        display: inline-block;
        background-color: red;
        font-size: 3vw;
        text-align: center;
        padding: 5vw 0vw 5vw 0vw;
        min-width:40vw;
    }

    div.op2 {
        width: 38%;
        background-color: green;
        display: inline-block;
        margin-right: 0vw;
        font-size: 3vw;
        text-align: center;
        padding: 5vw 0vw 5vw 0vw;
        min-width:40vw;
    }

<div class="container">
    
    <div class="titulo">O que você está procurando?</div>
    <div class="ctnFlex">
       <div class="op1">Opção 1</div>
       <div class="op2">Oção 2</div>
      
    </div>
   
</div>

Answer 3

FLOAT

div.container {
        height: 100%;
        background: -webkit-linear-gradient(top, #088fad 20%, #00d5ff 100%);
    }

    div.titulo {
        font-size: 5vw;
        background-color: blue;
        text-align: center;
        padding: 3vw;
        position: relative;
    }

    div.op1 {
        width: 38%;
        float:left;
        background-color: red;
        font-size: 3vw;
        text-align: center;
        padding: 5vw 0vw 5vw 0vw;
        min-width:40vw;
    }

    div.op2 {
        width: 38%;
        background-color: green;
        float:right;
        margin-right: 0vw;
        font-size: 3vw;
        text-align: center;
        padding: 5vw 0vw 5vw 0vw;
        min-width:40vw;
        float:right;
    }
    .clean{clear:both;}

<div class="container">
    <div class="col-md-12"></div>
    <div class="titulo">O que você está procurando?</div>
    <div class="op1">Opção 1</div>
    <div class="op2">Oção 2</div>
    <div class="clean"></div>
</div