I'm in the process of customizing this layout with Bootstrap: https://i.sstatic.net/jJlOl.png
Here's the code snippet:
<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>
Here is the current CSS:
CSS code goes here...Essentially, I want to align the current price next to the product title on the right side and remain responsive. How can I make the adjust budget button and input area appear side by side and have equal sizes? Lastly, how can I position the remove from wishlist button on the same line as the adjust budget button?
I tried using display: inline-block and adjusting width and padding, but it didn't work well responsively.
In short, I'm aiming for a design like this: https://i.sstatic.net/No2kY.jpg