How to put two html elements on the same line on opposite sides

Question

I am trying to style this (I am using bootstrap):

Here is the code:

<div class="container-fluid" id="products">
    <h2 class='wishlist-title text-center'>My Wishlist ({{ productList|length }} items)</h2>
    {% for product in productList %}
    <div class='userProduct text-left'>
        <a class='product-title' href="{{ product.productURL }}" target="_blank">{{ product.title|truncate(30) }}</a>
        <h4 class="current-price text-right">Current Price: ${{ product.currentPrice }}</h4>
        <h4 class="budget">Budget: ${{ product.userBudget }}</h4>
        <form class='adjust-budget' method="POST" action="{{ url_for('budget', id=product.id) }}">
            <input class='budget-update input-lg' type="number" id="new_budget" name="new_budget" min="0" max="{{ product.currentPrice }}" step=".01"><br>            
            <input class='budget-update-btn btn btn-primary' type="submit" value="Adjust Budget">
        </form>
        <form class='remove-wishlist' action="{{ url_for('delete', id=product.id) }}">
            <button class="btn btn-danger" type="submit">Remove from Wishlist</button>
        </form>
        
        {% if loop.index < productList|length %}
        <hr>
        {% endif %}
    </div>
    {% endfor %}
</div>

and the current css

body {
    padding-top: 50px;
    font-family: Cabin;
    font-size: 20px;
  }
  
  footer {
    color: #111111;    
    position: absolute;
    bottom: 0;
    width: 100%;  
    
}

.form-track {
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}

.product-title {
  display: inline-block;
  
}

.current-price {
  display: inline-block;
  
}

.adjust-budget {
  display: inline-block;
  
}

.remove-wishlist {
  display: inline-block;
  
}

  .logo {
    font-size: 30px;
  }  
  
  /*
   * Global add-ons
   */
  
  .sub-header {
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
  }
  
  /*
   * Top navigation
   * Hide default border to remove 1px line.
   */
  .navbar-fixed-top {
    border: 0;
  }
  
  
  /*
   * Main content
   */
  
  .main {
    padding: 20px;
  }
  @media (min-width: 768px) {
    .main {
      padding-right: 40px;
      padding-left: 40px;
    }
  }
  .main .page-header {
    margin-top: 0;
  } 

I essentially want the current price to be on the same line as the product title but to stay on the right side and to be responsive. Also, how can I make the adjust budget button and the input area side by side and make them the same size? Lastly, I would want the remove from wishlist button to be on the same line as the adjust budget button (similar to the current price and product title)

I've tried doing some things with display: inline-block and the width and padding but it is not responsive

TLDR How can I style this to look like this:

Answer 1

Modify your html to like below i have added some div to use css flex property

 <div class="container-fluid" id="products">
    <h2 class='wishlist-title text-center'>My Wishlist ({{ productList|length }} items)</h2>
    {% for product in productList %}
    <div class='userProduct text-left'>
       <div class="productprice">
        <a class='product-title' href="{{ product.productURL }}" target="_blank">{{ product.title|truncate(30) }}</a>
        <h4 class="current-price text-right">Current Price: ${{ product.currentPrice }}</h4>
       </div>
       
        <h4 class="budget">Budget: ${{ product.userBudget }}</h4>
        <div class="formdiv">
            <form class='adjust-budget' method="POST" action="{{ url_for('budget', id=product.id) }}">
                <input class='budget-update input-lg' type="number" id="new_budget" name="new_budget" min="0" max="{{ product.currentPrice }}" step=".01"><br>            
                <input class='budget-update-btn btn btn-primary' type="submit" value="Adjust Budget">
            </form>
            <form class='remove-wishlist' action="{{ url_for('delete', id=product.id) }}">
                <button class="btn btn-danger" type="submit">Remove from Wishlist</button>
            </form>
        </div>
       
        {% if loop.index < productList|length %}
        <hr>
        {% endif %}
    </div>
    {% endfor %}
</div>

and add these css

    .adjust-budget {
      display: flex;
    }
    
    .productprice,.formdiv{
        display: flex;
        justify-content: space-between;
    }

  

and it will be similar to what you expected in image as your server side code is compiled so the dynamic value is not printed