logo CodeStepByStep logo


Language/Type: HTML flex layout
Author: Melissa Hovik (on 2018/10/22)

Write the HTML and CSS necessary to recreate the expected appearance below.

  • Each of the two squares has a width and height of 100px and a 3px solid black border.
  • Each dot has a diameter (width) of 20px.
  • Use CSS flex properties to layout the boxes as shown.
Type your HTML solution code here:
Type your CSS solution code here:

This is a page body / style exercise. Submit the HTML content that would go in the page's <body> tag, and the CSS content that would go in a <style> tag placed inside the <head> section. Do not include a surrounding <html> or <body> tag in your HTML, nor a surrounding <style> tag in your CSS.

You must log in before you can solve this problem.

Log In

Need help?

If you do not understand how to solve an exercise or why your solution doesn't work, please contact your TA or instructor.
If something seems wrong with the site (errors, slow performance, incorrect tests, etc.), please

Is there a problem? Contact a site administrator.

©, all rights reserved.