/* Universal selector */* { margin: 0; padding: 0; box-sizing: border-box;}body { background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); font-family: sans-serif; line-height: 1.4;}h1 { text-align: center;}h2,h3 { text-align: left;}/* h2,h3,a,ul,li,p { margin-left: 52px;} *//* Product */.product { border: 5px solid black; width: 1350px; margin: 75px auto; position: relative;}.product-title { font-size: 30px; font-weight: bold; text-transform: uppercase; background-color: rgba(88, 88, 88, 0.564); padding: 25px;}.img-container { display: flex; justify-self: flex-start; margin-bottom: 0;}/* Price and Shipping */.price { font-size: 22px; /* margin-left: 71px; */ margin-bottom: 15px;}.price-adjust { font-size: 28px;}.shipping { font-size: 14px; color: rgb(188, 188, 188); font-weight: bold; text-transform: uppercase; margin-bottom: 5px; /* margin-left: -10px */}/* SALE COMPONENT */.sale { background-color: rgb(214, 24, 24); color: white; border-radius: 5px; font-size: 20px; text-transform: uppercase; letter-spacing: 3px; font-weight: bold; padding: 10px 18px; display: inline-block; position: absolute; top: -25px; left: -104px;}.sale { animation: wobble 1.5s ease-in-out 2; transform-origin: center top; transition: padding .1s; cursor: pointer;}@keyframes wobble { 0% { transform: rotate(0deg); } 25% { transform: rotate(3deg); } 50% { transform: rotate(-3deg); } 75% { transform: rotate(2deg); } 100% { transform: rotate(0deg); }}/* MORE INFORMATION */.more-info { color: black; font-size: 15px; display: inline-block;}.info-margin { margin-bottom: 60px;}.more-info:link { color: black; text-decoration: none; display: inline-block;}.more-info:hover,.more-info:active { color: rgb(0, 0, 0); text-decoration: underline; transition: transform 0.1s; transform: scale(1.2);}/* FEATURES */.features-title { text-transform: uppercase; font-size: 16px; margin-bottom: 15px;}.features-list { font-size: 18px; list-style: square; /* margin-left: 94px; */}.features-list li { margin-bottom: 5px;}.features-list li:last-child { margin-bottom: 20px;}/* COLOR OPTIONS */.color-div { margin-left: 52px; margin-bottom: 28px; /* display: inline-block; */}.colors { height: 30px; width: 30px; filter: blur; border-radius: 50px; margin-right: 10px; display: inline-block;}.natural-leather { background-color: rgb(77, 51, 26)}.smokey-brown { background-color: rgb(65, 55, 45);}.forest-green { background-color: rgb(33, 54, 18);}.deep-blue { background-color: rgb(3, 40, 67);}.sand { background-color: rgb(164, 158, 141);}.ashe { background-color: rgb(79, 79, 79);}.colors:hover { transform: scale(2); box-shadow: 0 0 0 2px rgba(165, 165, 165, 0.464); transition: transform 0.2s; transform: scale(1.8); cursor: pointer;}/* BUTTON */.add-cart { font-size: 20px; border: 0px solid; color: rgb(253, 253, 253); background-color: rgb(0, 0, 0); width: 100%; padding: 20px; cursor: pointer; letter-spacing: 1px;}.add-cart:hover { border-top: 4px solid black; color: rgb(0, 0, 0); font-size: 21px; font-weight: bold; background-color: rgb(255, 255, 255); transition: transform 0.2s;}.add-cart:active { color: rgb(0, 0, 0); font-size: 21px; font-weight: bold; background-color: rgb(255, 255, 255);}/* FLOATS *//* .img-container { float: left;} *//* .price-container { width: 615px; padding-right: 50px; float: right;} *//* .features-container { width: 615px; padding-right: 50px; float: right;} *//* alignment fix *//* .shipping { float: right; margin-left: -10px; padding-right: 140px;} *//* .more-info { float: left;} *//* FLEXBOX */.item-details-wrapper,.features-container { display: block; width: auto; width: 350px; /* flex: 1; */}.details-wrapper { display: flex; justify-content: flex-end; align-items: flex-start;}<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Men's Captain Cognac Boots</title><link rel="stylesheet" href="/assets/css/style.css" /></head><body><article class="product"><!-- Product Title --><header><h1 class="product-title">Men's Special Edition Cognac Boots</h1></header><!-- original image dimensions are 672x672 --><!-- SALE TAG TOP --><p class="sale">Sale</p><img src="/assets/img/01-menCaptainSpecialEditionCognac.png" alt="Shot of Brown leather boots" class="img-container" width="472" height="472" /><div class="details-wrapper"><div class="item-details-wrapper"><div class="price-container"><div class="product-flex"><p class="price"><strong class="price-adjust">$199</strong> or 4 interest free payments with Klarna♞</p><p class="shipping">Free Shipping & Returns</p></div><div class="info-margin"><a class="more-info" href="https://thursdayboots.com/products/mens-captain-lace-up-boot-cognac?utm_source=bing&utm_medium=cse&utm_term=32582249644122&msclkid=94237b7509301dea36be1ee615806382&utm_campaign=CPCS%20-%20Branded%20-%20Desktop%20-%20Men%27s%20Captain&utm_content=Tobacco"> More Information →</a></div></div><div class="color-div el--color"><div class="colors natural-leather"></div><div class="colors smokey-brown"></div><div class="colors forest-green"></div><div class="colors deep-blue"></div><div class="colors sand"></div><div class="colors ashe"></div></div></div><!-- FLEXBOX FEATURES --><!-- Product Features --><div class="features-container"><h2 class="features-title">Product Features</h2><ul class="features-list"><li>Limited Edition Two-Toned Hand Finished Leather</li><li>Dark Anejo (Body) And Cacao (Counter, Cap Toe) Leather</li><li> Two-Toned effect is minimal in low light, <br /> with an eye-catching look in bright light</li><li>Goodyear Welt Construction for longevity</li><li>Premium flat waxed cotton laces</li><li>Poron® Antimicrobial Shock Absorbing Insoles</li><li>Cork-Bed Midsoles that Form to Your Feet</li><li>Hardwearing Steel Shanks Durable Studded Rubber</li><li>Outsoles Handcrafted With Integrity</li></ul></div></div><button class="add-cart">ADD TO CART</button></article></body></html>I am trying to align to containers to the right of an image, these containers have multiple elements in them (text and color swatches). The issue I am running into is that the elements are staying bellow the image which is top left of the main space. The project is to create a tab containing an image of a product, with price details, shipping, and product info. I am using flexbox to align the elements in a row. I am not using a grid.
Attached is an image of the highlighted area I want the content to appear.
.item-details-wrapper,.features-container { display: block; width: auto; width: 350px;/* flex: 1; */}.details-wrapper { display: flex; justify-content: flex-end; align-items: flex-start;}
This is what I have so far, I tried to change all sorts of flex setting but nothing is working.I have the fixed width because I was thinking the content was taking up to much width and would not move up dynamically, but even with width: auto; not working.