Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

              
                <h1><span class="grocery">Grocery</span> <span class="list">List</span></h1>

<a href="#" onclick="find('#groceryform').innerHTML = '';">Clear</a>

<form id="groceryform" method="get" target="_blank" action="grocery.php"></form>

<div class="recipe-container">
	<ul class="recipes">
					<li id="id508" data-servings="4" draggable="true">44-Clove Garlic Soup</li>
					<li id="id449" data-servings="1" draggable="true">Adult Lunchable with Veggies, Salami, and Boursin</li>
					<li id="id494" data-servings="24" draggable="true">Aged Eggnog</li>
					<li id="id298" data-servings="6" draggable="true">All-day minestrone (slow cooker)</li>
					<li id="id27" data-servings="2" draggable="true">Almond Caesar salad with croutons</li>
					<li id="id351" data-servings="21" draggable="true">Almond cloud cookies</li>
					<li id="id479" data-servings="1" draggable="true">Almond latte overnight oats</li>
					<li id="id506" data-servings="1" draggable="true">Almond muffin in a minute</li>
					<li id="id256" data-servings="4" draggable="true">Antipasto Chef's Salad</li>
					<li id="40" data-servings="2" draggable="true">Apple Carrot Salad</li>
					<li id="id480" data-servings="6" draggable="true">Apple cheddar bacon egg muffins</li>
					<li id="id20" data-servings="1" draggable="true">Apple-Brie Panini</li>
					<li id="id309" data-servings="4" draggable="true">Apple-cheddar baked sweet potatoes</li>
					<li id="id369" data-servings="4" draggable="true">Arroz non pollo (slow cooker)</li>
					<li id="id374" data-servings="6" draggable="true">Artichoke Risotto with Mascarpone, Lemon, and Thyme</li>
					<li id="id57" data-servings="6" draggable="true">Artichoke, Leek, and Potato Casserole</li>
					<li id="id387" data-servings="4" draggable="true">Arugula Salad with Figs, Prosciutto, Walnuts, and Parmesan</li>
					<li id="id259" data-servings="4" draggable="true">Asparagus and lemon risotto</li>
					<li id="id436" data-servings="8" draggable="true">Asparagus pesto</li>
					<li id="id513" data-servings="1" draggable="true">Avocado, olive tapenade, and chedder toast</li>
					<li id="id89" data-servings="8" draggable="true">Baby Brussels sprouts with wild rice and pecans</li>
					<li id="id486" data-servings="8" draggable="true">Bacon cheddar chive scones</li>
					<li id="id354" data-servings="24" draggable="true">Bagel and lox deviled eggs</li>
					<li id="id220" data-servings="10" draggable="true">Baked Beans</li>
					<li id="id434" data-servings="12" draggable="true">Baked English Muffins</li>
					<li id="2" data-servings="6" draggable="true">Baked Shrimp Scampi</li>
					<li id="id482" data-servings="4" draggable="true">Baked Tofu Banh Mi Salad</li>
					<li id="id291" data-servings="4" draggable="true">Baked Ziti with Crunchy Italian Salad and Garlic Bread</li>
					<li id="id105" data-servings="4" draggable="true">Baked eggs and beans on toast</li>
					<li id="id329" data-servings="4" draggable="true">Baked eggs and grits</li>
					<li id="id526" data-servings="6" draggable="true">Baked macaroni and cheese</li>
					<li id="id403" data-servings="1" draggable="true">Baked tofu</li>
					<li id="id465" data-servings="1" draggable="true">Basic bento: tofu and egg</li>
					<li id="id6" data-servings="2" draggable="true">Basil-Lime Vinaigrette</li>
					<li id="id277" data-servings="1" draggable="true">Bavarian kartofflepuffer (potato pancakes)</li>
					<li id="id300" data-servings="1" draggable="true">Berry Granola Parfait</li>
					<li id="48" data-servings="1" draggable="true">Berry Sauce</li>
					<li id="55" data-servings="1" draggable="true">Best Oatmeal Ever</li>
					<li id="id339" data-servings="4" draggable="true">Black bean and brown rice cakes</li>
					<li id="id32" data-servings="2" draggable="true">Black bean and cheese tacos</li>
					<li id="id518" data-servings="2" draggable="true">Black bean and zucchini enchiladas</li>
					<li id="id510" data-servings="6" draggable="true">Black bean mini burgers</li>
					<li id="id173" data-servings="4" draggable="true">Black bean salad with avocado lime dressing</li>
					<li id="id400" data-servings="4" draggable="true">Black-eyed pea burgers with summer squash slaw</li>
					<li id="47" data-servings="2" draggable="true">Blueberry Bliss Smoothie</li>
					<li id="id455" data-servings="1" draggable="true">Breaded and fried shrimps</li>
					<li id="54" data-servings="1" draggable="true">Breakfast Mediterranean Scramble</li>
					<li id="id136" data-servings="8" draggable="true">Broccoli soup with cheddar toasts</li>
					<li id="id58" data-servings="4" draggable="true">Broccoli with Parmesan and Walnuts</li>
					<li id="id321" data-servings="4" draggable="true">Broiled halibut with ricotta-pea puree</li>
					<li id="id46" data-servings="2" draggable="true">Brown rice, chickpea, feta, and mint salad</li>
					<li id="id305" data-servings="4" draggable="true">Bruschetta baked potatoes</li>
					<li id="id112" data-servings="8" draggable="true">Caesar Salad Dressing</li>
					<li id="id380" data-servings="24" draggable="true">Cannoli</li>
					<li id="id373" data-servings="24" draggable="true">Caprese Skewers</li>
					<li id="id423" data-servings="8" draggable="true">Caramelized onion and brie pizza</li>
					<li id="id456" data-servings="8" draggable="true">Carrot and celeriac (celery root) salad</li>
					<li id="id527" data-servings="2" draggable="true">Cavatelli and kale with fried rosemary and walnuts</li>
					<li id="id433" data-servings="2" draggable="true">Charred Eggplant and Walnut Pesto Pasta Salad</li>
					<li id="id501" data-servings="1" draggable="true">Cheesy mushroom omelette</li>
					<li id="id269" data-servings="1" draggable="true">Cherry almond smoothie</li>
					<li id="id177" data-servings="10" draggable="true">Cherry lime granola</li>
					<li id="id73" data-servings="6" draggable="true">Cherry-lime cups</li>
					<li id="id497" data-servings="2" draggable="true">Chirashi-Style Rice Bowls</li>
					<li id="id484" data-servings="1" draggable="true">Chocolate covered strawberry quick oatmeal</li>
					<li id="id243" data-servings="1" draggable="true">Chocolate dipped coconut macaroons</li>
					<li id="id293" data-servings="16" draggable="true">Chocolate-Pumpkin Cheesecake Bars</li>
					<li id="id347" data-servings="1" draggable="true">Chopped antipasto salad</li>
					<li id="id17" data-servings="4" draggable="true">Citrus Rice Salad</li>
					<li id="id327" data-servings="8" draggable="true">Classic cheese fondue (for Cuisinart Fondue Pot)</li>
					<li id="id50" data-servings="6" draggable="true">Cocktail Sauce</li>
					<li id="id359" data-servings="4" draggable="true">Coconut shrimp with tropical rice</li>
					<li id="id176" data-servings="10" draggable="true">Coffee, hazelnut, and banana granola</li>
					<li id="id344" data-servings="4" draggable="true">Couscous stuffed bellpeppers with basil sauce</li>
					<li id="id514" data-servings="2" draggable="true">Cozy bean and egg skillet for two</li>
					<li id="id284" data-servings="4" draggable="true">Creamy Broccoli &amp; Sun-Dried Tomato Orzotto</li>
					<li id="id138" data-servings="8" draggable="true">Creamy caramelized onion soup</li>
					<li id="id525" data-servings="4" draggable="true">Creamy chipotle salad dressing</li>
					<li id="id35" data-servings="4" draggable="true">Creamy tomato soup</li>
					<li id="id151" data-servings="4" draggable="true">Dang cold Asian noodle salad</li>
					<li id="id352" data-servings="3" draggable="true">Double-shot mocha chunks</li>
					<li id="id196" data-servings="8" draggable="true">Drop biscuits (Cook's Illustrated)</li>
					<li id="id207" data-servings="6" draggable="true">Easy chickpea and vegetable curry</li>
					<li id="id399" data-servings="2" draggable="true">Egg sauce</li>
					<li id="id249" data-servings="1" draggable="true">Eggnog glazed spritz cookies</li>
					<li id="id389" data-servings="4" draggable="true">Eggplant involtini</li>
					<li id="id271" data-servings="1" draggable="true">Eggs</li>
					<li id="id427" data-servings="4" draggable="true">Eggs with mushrooms and tomatoes</li>
					<li id="id341" data-servings="1" draggable="true">English muffin with apple and cheddar</li>
					<li id="id23" data-servings="2" draggable="true">Exercise Rejuvenator</li>
					<li id="42" data-servings="2" draggable="true">Extreme Green Salad</li>
					<li id="16" data-servings="12" draggable="true">Flaky Buttermilk Biscuits</li>
					<li id="id370" data-servings="10" draggable="true">Flan</li>
					<li id="id376" data-servings="1" draggable="true">French Onion Dip</li>
					<li id="id132" data-servings="4" draggable="true">French onion soup</li>
					<li id="id481" data-servings="2" draggable="true">French toast popcorn seasoning</li>
					<li id="id236" data-servings="4" draggable="true">French-Onion Stuffed Potatoes</li>
					<li id="id273" data-servings="1" draggable="true">Frozen Dinner</li>
					<li id="id428" data-servings="1" draggable="true">Fruit and cheese breakfast</li>
					<li id="id386" data-servings="16" draggable="true">Fruity oatmeal topping</li>
					<li id="id350" data-servings="24" draggable="true">Fudge brownies</li>
					<li id="id238" data-servings="6" draggable="true">Ghirardelli Ultimate Double Chocolate Cookies</li>
					<li id="id356" data-servings="4" draggable="true">Go green salad with mochi croutons</li>
					<li id="id272" data-servings="12" draggable="true">Goat cheese, sun dried tomato, and pesto torta</li>
					<li id="id301" data-servings="2" draggable="true">Golden Granola</li>
					<li id="id485" data-servings="4" draggable="true">Golden-crusted Brussels sprouts</li>
					<li id="15" data-servings="4" draggable="true">Greek Salad</li>
					<li id="id361" data-servings="10" draggable="true">Greek layered dip with pita chips</li>
					<li id="id134" data-servings="4" draggable="true">Green pea soup with cheddar scallion panini</li>
					<li id="id19" data-servings="2" draggable="true">Green-packed Stir Fry with Fresh Herbs</li>
					<li id="id289" data-servings="8" draggable="true">Grilled Cheese &amp; Tomato Skillet</li>
					<li id="17" data-servings="4" draggable="true">Grilled Portobello Mushrooms Stacked with Fresh Spinach and Shaved Manchego Cheese</li>
					<li id="id414" data-servings="6" draggable="true">Grilled cheese and romesco sandwiches</li>
					<li id="id14" data-servings="4" draggable="true">Grilled garlic-lime fish tacos</li>
					<li id="id156" data-servings="8" draggable="true">Grilled salmon gyros</li>
					<li id="id159" data-servings="4" draggable="true">Grilled salmon sushi rice bowl</li>
					<li id="28" data-servings="8" draggable="true">Guacamole</li>
					<li id="id304" data-servings="4" draggable="true">Guacamole baked potatoes</li>
					<li id="id51" data-servings="2" draggable="true">Heinz Chili Sauce</li>
					<li id="id167" data-servings="4" draggable="true">Herb crusted salmon with spinach salad</li>
					<li id="id375" data-servings="6" draggable="true">Herbed biscuits with smoked salmon</li>
					<li id="id157" data-servings="4" draggable="true">Homemade ponzu sauce</li>
					<li id="id22" data-servings="4" draggable="true">Hot Cocoa</li>
					<li id="id462" data-servings="12" draggable="true">Hot buttered rum</li>
					<li id="id421" data-servings="1" draggable="true">Hot cereal with apple butter and walnuts</li>
					<li id="id492" data-servings="1" draggable="true">Hummus vegetable sandwich</li>
					<li id="id228" data-servings="4" draggable="true">Indian Chickpea Wrap</li>
					<li id="id296" data-servings="4" draggable="true">Jamie's Old-Fashioned Ginger Crinkle Cookies</li>
					<li id="id150" data-servings="4" draggable="true">Japanese style grilled salmon</li>
					<li id="id478" data-servings="2" draggable="true">Kale &amp; White Cheddar Quesadillas with Radishes &amp; Fried Eggs</li>
					<li id="id237" data-servings="4" draggable="true">Kale Salad with Marcona Almonds and Sherry Vinaigrette</li>
					<li id="id247" data-servings="4" draggable="true">Kale and feta salad</li>
					<li id="id246" data-servings="4" draggable="true">Kale caesar salad</li>
					<li id="id279" data-servings="4" draggable="true">Kale panzanella</li>
					<li id="id401" data-servings="4" draggable="true">Korean scallion pancakes with vegetable salad</li>
					<li id="id221" data-servings="8" draggable="true">Lemonade</li>
					<li id="id332" data-servings="2" draggable="true">Lemony walnut chickpea salad with goat's cheese</li>
					<li id="id8" data-servings="8" draggable="true">Lentil Soup</li>
					<li id="id452" data-servings="1" draggable="true">Less-mess oven bacon</li>
					<li id="id174" data-servings="4" draggable="true">Linguine with asparagus and egg</li>
					<li id="56" data-servings="2" draggable="true">Lovely Lentils</li>
					<li id="id530" data-servings="2" draggable="true">Malted hot cocoa</li>
					<li id="id384" data-servings="18" draggable="true">Maple shortbread sandwich cookies</li>
					<li id="id391" data-servings="16" draggable="true">Maple-bacon potato skins</li>
					<li id="19" data-servings="4" draggable="true">Margherita Salad</li>
					<li id="id34" data-servings="4" draggable="true">Marinara Sauce</li>
					<li id="id195" data-servings="4" draggable="true">Marinated feta, spinach &amp; poached egg salad</li>
					<li id="id355" data-servings="1" draggable="true">Mayonnaise</li>
					<li id="id378" data-servings="1" draggable="true">Mediterranean Grain Salad</li>
					<li id="id290" data-servings="6" draggable="true">Mediterranean Patio Pizza</li>
					<li id="id489" data-servings="1" draggable="true">Mediterranean Salad with Artichokes, Penne, and Sun-Dried Tomatoes</li>
					<li id="id435" data-servings="48" draggable="true">Mesquite chocolate chip cookies</li>
					<li id="21" data-servings="2" draggable="true">Mexican Ensalada</li>
					<li id="id483" data-servings="2" draggable="true">Mexican caprese salad</li>
					<li id="id500" data-servings="1" draggable="true">Mexican egg roll up</li>
					<li id="id519" data-servings="5" draggable="true">Mexican spice blend</li>
					<li id="id245" data-servings="4" draggable="true">Mexican wedding cookies</li>
					<li id="id398" data-servings="1" draggable="true">Microwave mug brownie</li>
					<li id="id292" data-servings="8" draggable="true">Millet bread (Corn-free cornbread)</li>
					<li id="id372" data-servings="36" draggable="true">Mini Tostadas</li>
					<li id="id531" data-servings="10" draggable="true">Miso-ginger dressing</li>
					<li id="id252" data-servings="8" draggable="true">Mocha chip cookie scones</li>
					<li id="id429" data-servings="1" draggable="true">Morning pizza</li>
					<li id="id260" data-servings="2" draggable="true">Moroccan lentil salad</li>
					<li id="id524" data-servings="6" draggable="true">Mulled cranberry apple cider</li>
					<li id="id40" data-servings="2" draggable="true">Muscle Maximizer</li>
					<li id="id475" data-servings="2" draggable="true">Mushroom &amp; Broccoli Casserole with Baked Pastry</li>
					<li id="id222" data-servings="4" draggable="true">Mushroom and lentil soup</li>
					<li id="id430" data-servings="2" draggable="true">Mustard, Avocado, and Dill on a Whole-Wheat Muffin With Boiled Egg</li>
					<li id="id9" data-servings="1" draggable="true">Natural sports drink</li>
					<li id="id523" data-servings="2" draggable="true">Niçoise-Style Salad  with Fingerling Potatoes, Summer Squash, &amp; Fried Eggs</li>
					<li id="12" data-servings="6" draggable="true">Old Fashion Vegetable Soup</li>
					<li id="id488" data-servings="2" draggable="true">Olive and Pepper Grilled Cheese Sandwiches</li>
					<li id="13" data-servings="6" draggable="true">Onion Pie</li>
					<li id="id331" data-servings="2" draggable="true">Open face egg and tomato sandwich</li>
					<li id="id171" data-servings="4" draggable="true">Orecchiette with roasted cauliflower</li>
					<li id="id30" data-servings="6" draggable="true">Oregano Marinated Chicken</li>
					<li id="id493" data-servings="4" draggable="true">Oregano halloumi with orzo salad</li>
					<li id="id463" data-servings="8" draggable="true">Overnight Cinnamon Rolls</li>
					<li id="id262" data-servings="1" draggable="true">PB&amp;J smoothie</li>
					<li id="id408" data-servings="4" draggable="true">Panko-crusted tofu with black bean salad</li>
					<li id="id43" data-servings="6" draggable="true">Parker's split pea soup</li>
					<li id="id121" data-servings="4" draggable="true">Pasta with roasted vegetables and bacon</li>
					<li id="id517" data-servings="2" draggable="true">Peach &amp; Pickled Pepper Grilled Cheese</li>
					<li id="id55" data-servings="4" draggable="true">Peanut Noodle Salad</li>
					<li id="id353" data-servings="22" draggable="true">Peanut butter-oatmeal sandwich cookies</li>
					<li id="id118" data-servings="1" draggable="true">Pecan Pie</li>
					<li id="id185" data-servings="10" draggable="true">Pecan molasses granola</li>
					<li id="id281" data-servings="4" draggable="true">Pecan-Crusted Mozzarella Salad</li>
					<li id="id476" data-servings="2" draggable="true">Penne &amp; Arrabbiata Sauce with Roasted Carrot &amp; Tangelo Salad</li>
					<li id="id244" data-servings="24" draggable="true">Peppermint crunch bark</li>
					<li id="id417" data-servings="1" draggable="true">Perfect soft cooked egg</li>
					<li id="id99" data-servings="10" draggable="true">Pesto</li>
					<li id="id509" data-servings="2" draggable="true">Pesto Cavatelli w/ Mushrooms and Spicy Breadcrumbs</li>
					<li id="id25" data-servings="4" draggable="true">Pesto Orzo with Peas</li>
					<li id="id313" data-servings="6" draggable="true">Pinto bean and poblano tacos</li>
					<li id="id64" data-servings="4" draggable="true">Pizza bianca</li>
					<li id="51" data-servings="1" draggable="true">Popeye's Muscle Salad</li>
					<li id="11" data-servings="4" draggable="true">Pot Roast Carbonnade</li>
					<li id="id191" data-servings="4" draggable="true">Potato hash with spinach and eggs</li>
					<li id="id495" data-servings="2" draggable="true">Purple rice and miso spinach bowls</li>
					<li id="id326" data-servings="1" draggable="true">Ranch dip with vegetables</li>
					<li id="id86" data-servings="2" draggable="true">Raspberry-lemon thumbprint cookies</li>
					<li id="id133" data-servings="4" draggable="true">Red lentil soup with sage and bacon</li>
					<li id="id499" data-servings="2" draggable="true">Roasted Brussels sprouts and freekeh salad</li>
					<li id="id45" data-servings="4" draggable="true">Roasted Salmon with Walnut-Pepper Relish</li>
					<li id="id53" data-servings="1" draggable="true">Roasted Shallot Vinaigrette</li>
					<li id="id521" data-servings="2" draggable="true">Roasted Sweet Potato Quesadillas</li>
					<li id="id26" data-servings="6" draggable="true">Roasted potatoes and tomatoes</li>
					<li id="id345" data-servings="1" draggable="true">Roasted vegetable salad with goat cheese</li>
					<li id="62" data-servings="4" draggable="true">Roquefort Cheese Sauce</li>
					<li id="id337" data-servings="4" draggable="true">Salad with Radishes and Spicy Pumpkin Seeds</li>
					<li id="id348" data-servings="1" draggable="true">Salad with egg, nuts, and veggies</li>
					<li id="id280" data-servings="4" draggable="true">Salmon Tuscano with Herbed Orzo</li>
					<li id="id187" data-servings="4" draggable="true">Salmon and potatoes in tomato sauce</li>
					<li id="id172" data-servings="2" draggable="true">Salsa fresca</li>
					<li id="id461" data-servings="8" draggable="true">Salt-baked walnut brioche scones</li>
					<li id="id308" data-servings="4" draggable="true">Samosa baked potatoes</li>
					<li id="id437" data-servings="1" draggable="true">Savory Oatmeal and Soft-Cooked Egg</li>
					<li id="id254" data-servings="12" draggable="true">Scalloped Yukon Gold and Sweet Potato Gratin</li>
					<li id="id29" data-servings="2" draggable="true">Schnitzel</li>
					<li id="id450" data-servings="1" draggable="true">Seitan and three-color pepper stir-fry bento</li>
					<li id="id365" data-servings="4" draggable="true">Shakshuka with chickpeas</li>
					<li id="id248" data-servings="4" draggable="true">Shaved Brussels Sprout and Kale Slaw with Pecorino and Toasted Hazelnuts</li>
					<li id="18" data-servings="1" draggable="true">Sherry Vinaigrette</li>
					<li id="id21" data-servings="4" draggable="true">Shredded Green Beans</li>
					<li id="id163" data-servings="4" draggable="true">Shrimp and cabbage stir fry</li>
					<li id="id75" data-servings="4" draggable="true">Shrimp and edamame with lime</li>
					<li id="id383" data-servings="2" draggable="true">Simple candied orange peel</li>
					<li id="id125" data-servings="1" draggable="true">Simple syrup</li>
					<li id="id336" data-servings="4" draggable="true">Skillet shrimp and orzo</li>
					<li id="id286" data-servings="2" draggable="true">Slow-Cooker Greek Stuffed Peppers</li>
					<li id="8" data-servings="3" draggable="true">Smoked Salmon Ebelskivers</li>
					<li id="id302" data-servings="4" draggable="true">Smoked salmon baked potatoes</li>
					<li id="id477" data-servings="2" draggable="true">Smoky Seared Cod with Roasted Potatoes &amp; Dates</li>
					<li id="id65" data-servings="10" draggable="true">Smoky Sweet-Potato Soup</li>
					<li id="id206" data-servings="4" draggable="true">Smoky white bean and arugula panini</li>
					<li id="id255" data-servings="4" draggable="true">Soba Noodle Salad</li>
					<li id="id38" data-servings="4" draggable="true">Soba salad with asparagus and shrimp</li>
					<li id="10" data-servings="4" draggable="true">Spaetzle</li>
					<li id="id28" data-servings="4" draggable="true">Spiced Apple Sauce</li>
					<li id="id15" data-servings="2" draggable="true">Spicy Rice Casserole</li>
					<li id="id358" data-servings="4" draggable="true">Spicy orange tofu and vegetable stir-fry</li>
					<li id="id496" data-servings="2" draggable="true">Spicy poblano pepper and cheese tortas</li>
					<li id="id349" data-servings="24" draggable="true">Spider web brownies</li>
					<li id="id109" data-servings="8" draggable="true">Spinach lasagna with mushroom ragu</li>
					<li id="id52" data-servings="2" draggable="true">Spinach souffle</li>
					<li id="id457" data-servings="2" draggable="true">Spring Chickpea Pasta Salad</li>
					<li id="61" data-servings="2" draggable="true">Steakhouse steaks</li>
					<li id="id268" data-servings="4" draggable="true">Stir-Fry Sauce (Clear)</li>
					<li id="id263" data-servings="2" draggable="true">Stir-Fry Sauce (Hoisin and Lime)</li>
					<li id="id264" data-servings="4" draggable="true">Stir-Fry Sauce (Spicy)</li>
					<li id="id265" data-servings="4" draggable="true">Stir-Fry Sauce (Sweet and Sour)</li>
					<li id="63" data-servings="6" draggable="true">Stove top mac and cheese</li>
					<li id="id18" data-servings="4" draggable="true">Straw and Hay Fettuccine Tangle</li>
					<li id="32" data-servings="1" draggable="true">Super Protein Salad</li>
					<li id="id491" data-servings="1" draggable="true">Super veggie onigirazu</li>
					<li id="id158" data-servings="4" draggable="true">Sushi rice</li>
					<li id="id498" data-servings="2" draggable="true">Sweet &amp; Savory Korean Rice Cakes</li>
					<li id="30" data-servings="2" draggable="true">Sweet Almond Date Smoothie</li>
					<li id="57" data-servings="4" draggable="true">Sweet Mashed Potatoes</li>
					<li id="id487" data-servings="2" draggable="true">Sweet and Spicy Tofu with Jasmine Rice and Crispy Shallot</li>
					<li id="id402" data-servings="4" draggable="true">Sweet and sour wheatballs</li>
					<li id="id406" data-servings="8" draggable="true">Sweet, Spicy &amp; Salty Candied Pecans</li>
					<li id="id250" data-servings="1" draggable="true">Taco Spread</li>
					<li id="id451" data-servings="1" draggable="true">Tamagoyaki Bento</li>
					<li id="id251" data-servings="8" draggable="true">Tex Mex Scones</li>
					<li id="id104" data-servings="4" draggable="true">Tex-mex rice and black eyed peas</li>
					<li id="id390" data-servings="16" draggable="true">Texas chili potato skins</li>
					<li id="id377" data-servings="6" draggable="true">Thai Vegetable Stir-fry</li>
					<li id="31" data-servings="2" draggable="true">The Ironman Smoothie</li>
					<li id="id1" data-servings="24" draggable="true">The Original Chex Party Mix</li>
					<li id="36" data-servings="2" draggable="true">The Shake</li>
					<li id="22" data-servings="2" draggable="true">The Ultimate Green Smoothie</li>
					<li id="id393" data-servings="16" draggable="true">Toasted ravioli potato skins</li>
					<li id="id419" data-servings="4" draggable="true">Tofu Cuban sandwiches</li>
					<li id="id39" data-servings="4" draggable="true">Tofu and Sweet Potato Jambalaya</li>
					<li id="id490" data-servings="4" draggable="true">Tofu katsu onigirazu</li>
					<li id="5" data-servings="4" draggable="true">Tomato Basil Soup (La Madeleine copycat)</li>
					<li id="id283" data-servings="4" draggable="true">Tomato, Basil and Portobello Napoleons</li>
					<li id="id282" data-servings="2" draggable="true">Tomato-Basil Soup with Ricotta Dumplings</li>
					<li id="id36" data-servings="4" draggable="true">Triple Grilled Cheese</li>
					<li id="26" data-servings="2" draggable="true">Tropical Nut Smoothie</li>
					<li id="id261" data-servings="2" draggable="true">Tuscan panzanella salad</li>
					<li id="id471" data-servings="2" draggable="true">Udon noodle soup</li>
					<li id="id522" data-servings="2" draggable="true">Vadouvan curry spice blend</li>
					<li id="id295" data-servings="30" draggable="true">Vanilla chocolate sandwich cookies</li>
					<li id="id12" data-servings="6" draggable="true">Vegetable Stock</li>
					<li id="id394" data-servings="4" draggable="true">Vegetable and tofu pad thai</li>
					<li id="id214" data-servings="2" draggable="true">Vegetable egg scramble with feta</li>
					<li id="id5" data-servings="8" draggable="true">Vegetarian Chili</li>
					<li id="id37" data-servings="4" draggable="true">Vegetarian Steamed Dumplings</li>
					<li id="id322" data-servings="2" draggable="true">Veggie Carribean Panini</li>
					<li id="id270" data-servings="4" draggable="true">Veggie Pizza</li>
					<li id="id520" data-servings="2" draggable="true">Vietnamese-Style Vegetable Sandwiches with Spicy Mayo and Roasted Broccoli</li>
					<li id="id274" data-servings="6" draggable="true">Vineyard tofu salad</li>
					<li id="id107" data-servings="4" draggable="true">Warm shrimp and potato salad</li>
					<li id="id396" data-servings="4" draggable="true">Wasabi Salmon with Miso-Sesame Sauce</li>
					<li id="id379" data-servings="4" draggable="true">White Bean Salad With Spicy Roasted Tomatoes and Broccoli</li>
					<li id="id44" data-servings="2" draggable="true">Wild Mushroom Risotto</li>
			</ul>
</div>
!

CSS 

              
                ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
/*   width: 100%; */
/*   height: 3000px; */
}
li {
  border: 1px dashed grey;
  margin-right: 5px;
  width: 160px;
}
!

JS 

              
                
function find(sel) { return document.querySelector(sel); };
function findAll(sel) { return [].slice.call(document.querySelectorAll(sel)); };
String.is = function(x) {
	return typeof x == "string" || x instanceof String;
}

document.body.ondragstart = function(e) {
	var el = e.target;
	el.classList.add('dragging');
	e.dataTransfer.effectAllowed = 'copy';
	if(el.id == 'fasting' || el.id == 'free-entry')
		e.dataTransfer.setData('text', JSON.stringify(el.id));
	else 
		e.dataTransfer.setData('text', JSON.stringify({id:el.id, servings:+el.dataset.servings, name:el.textContent}));
};
document.body.ondragover = function(e) {
	var el = e.target;
	if( !el.webkitMatchesSelector("#groceryform") ) return;
	e.preventDefault();
	e.dataTransfer.dropEffect = 'copy';
	return false;
};
document.body.ondragend = function(e) {
};

document.body.ondrop = function(e) {
	e.target.appendChild(makeFormEntry(JSON.parse(e.dataTransfer.getData('text'))));
}

function makeFormEntry(data) {
	var div = document.createElement('div');
	if( data == "free-entry") {
		div.innerHTML = "<span class=close>X</span><p contenteditable class='free-entry'>";
	} else if( String.is(data) ) {
		div.innerHTML = "<span class=close>X</span><p class='text'>" + data;
	} else {
		div.innerHTML = "<span class=close>X</span><input type=hidden value='" + data.id + "' name=ids[" + data.id + "]><input type=number value='" + data.servings + "' name=servings[" + data.id + "][] min='0'> " + data.name;
	}
	div.classList.add('meal');
	return div;
}

findAll('#week td').forEach(function(el){
	el.ondragenter = function(e) {
		this.classList.add('over');
		e.preventDefault();
	}
	el.ondragleave = function(e) {
		this.classList.remove('over');
	}
});

document.body.onclick = function(e) {
	if(e.target.classList.contains('close')) {
		var recipe = e.target.parentElement;
		recipe.parentElement.removeChild(recipe);
	}
}
!
999px

Console